▼
Streaming live at 10am (PST)

Adding interaction section to homepage

Design help Animations & Interactions
#1

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.

Thanks for any help in advance!

Link to interaction page - [ http://positivevibesolutions.webflow.io/scroll ]

Homepage - http://positivevibesolutions.webflow.io/

Read-only link - https://preview.webflow.com/preview/positivevibesolutions?utm_source=positivevibesolutions&preview=9fab465fb2559f5ce07eb17819221f48

#2

Hey @Codeman,

Is this what you wanna do?

What I did on this preview was the following:

At the Home page:

Structure

  1. Created a div that will scroll (call it anything you prefer), I called it Animation Container;
  2. Give this Animation Container the following: height: 100vw and position: relative;
  3. Inside the Animation Container, I putted another div called Sticky, remember this name, it will be IMPORTANT;
  4. Give the Sticky div the following: width: 100vw, height: 100vh, position: absolute, top: 0 and overflow: hidden;
  5. Inside the Sticky, I pasted the wrapper that I copied from the old page;
  6. Insert a Embed element;
  7. Put the following code:<style> .sticky{ position: sticky; } </style>;
  8. If you used another Class on the Step 3, use that on the Step 7 instead of .sticky.

Interaction

  1. Give the Animation Container the interaction on Element Trigger: While Scrolling in View;
  2. Select the animation you created beforehand called: scroll messneger cell phones.
  3. IMPORTANT: on the Animation Boundaries, put the 0% on: “When element is fully visible” instead of the default, “Start entering”;
  4. 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.
1 Like
#3

Hey @gilson ,

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. :rofl:

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!!

#4

@gilson ,

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.

On the scroll page, the div I named “Scroll” (under wrapper) was what @PixelGeek instructed to do in the tutorial. https://www.youtube.com/watch?v=05frGyjyZvE&t=527s

I tried moving the wrapper by itself, then tried moving the “scroll” div with it, and it didn’t make a difference. Not sure where to go from here.

#5

I’m leaving now for a wedding, if I have some time I’ll get back to you tomorrow.

#6

Thanks, @gilson ! I really do appreciate your help.

#7

Hey @Codeman,

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.

#8

Hey @gilson ,

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?

Thanks, again, for your continued help!

1 Like
#9

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! :smile:

1 Like