I had a question regarding the interaction I made. I created it on its own page, and I was trying to move it to a section on my home page. When I try to move the wrapper and child sections over (horizontal scrolling), it takes up 100vh of the entire page and really messes things up. I also noticed the interactions don’t move from page to page. With that being said, I don’t mind making my /scroll page the new home page and moving things over from the home page to the /scroll page if necessary - making that the new home page.
Idealistically, I’d like to move the interaction horizontal scrolling section to my home page above the images at the bottom.
Created a div that will scroll (call it anything you prefer), I called it Animation Container;
Give this Animation Container the following: height: 100vw and position: relative;
Inside the Animation Container, I putted another div called Sticky, remember this name, it will be IMPORTANT;
Give the Sticky div the following: width: 100vw, height: 100vh, position: absolute, top: 0 and overflow: hidden;
Inside the Sticky, I pasted the wrapper that I copied from the old page;
Insert a Embed element;
Put the following code:<style> .sticky{ position: sticky; } </style>;
If you used another Class on the Step 3, use that on the Step 7 instead of .sticky.
Interaction
Give the Animation Container the interaction on Element Trigger:While Scrolling in View;
Select the animation you created beforehand called: scroll messneger cell phones.
IMPORTANT: on the Animation Boundaries, put the 0% on: “When element is fully visible” instead of the default, “Start entering”;
Access you animation and fix all the warnings. Since you choose to affect just the Selected Element, instead of a Class, you will need to fix this whenever you move you animation from a page to another.
WOW! Thank you so much!! I wanted to put it above the images, but I’m assuming I just start placing the div’s there instead of below the footer, right?
I can’t tell you how much I appreciate it! I would’ve never figured all of that out on my own.
Would it be more simple to follow those steps 1-8 on the /scroll page, and then save all of the sections on the home page as symbols, and paste them in the /scoll page and rename it the home page? This is my first time using Webflow, and I had to start out with interactions. Haha…
Secondly, will I have to create a new animation for the mobile breakpoints? Thanks, again, for your help!!
I followed your directions step by step, and it’s still taking 100vh of the entire page (behind the menu, and everything). That’s what it was doing when I tried to copy and move over the container. I’ll leave the page published so you can see it.
My bad, I forgot to tell you one step. your .wrapper is using position: fixed. You should change it to position: absolute and it should work just fine without covering you entire screen. Another thing was a typo, I told that the Animation container should have height: 100vw, but it’s actually height: 500vw.
The best thing you can do to be able to port your interactions anywhere is to make the interaction affect the class, not the element.
I recorded a my screen to show you what I did. If you have any doubts, tag me again.
That worked!! I only have one question though. Once it gets to the last slide, it takes 4-5 full scroll wheels to continue down the page. The first 4 slides only take 1 scroll wheel. I’ve tried several things like changing the vh on the Animation Container, and that makes it faster, but it makes the first 4 slides REALLY fast. lol I’m not sure what to do there?
Hey @Gilson - disregard that last question. When I went to mobile optimize it, that was much more difficult than anticipated, so I’m canning it. I need to learn how to design right. I believe I bit off more than I could chew.
Thanks, again, for all of your help. I learned a lot from you, so it wasn’t a total loss!! I’m smarter because of you, and for that I’m very grateful. Cheers my friend!
