Trying to Create Similar Effect - Looking for Guidance

Hi Folks,

I’m not a regular poster and am hoping to get more involved in the form, so I thought I’d put this question out there:

Onthis apple page for the iphone, there is a section that looks like this:

You’ll need to scroll down the page to get to this section.

Anyway, what is happening here is that we’re hitting a section of the screen where the scrolling motion does a list of things in sequence before allowing the visitor to move past the section:

  1. The phone animates up from the bottom of the screen and scales down so that it is fully in view.
  2. A series of bullet points animate onto the screen.
  3. There is a transition to a new graphic

Once all three of these things happen, the scrolling motion allows the visitor to move onto the next section of the screen.

My question is, how do we replicate this in webflow? I have a similar situation where I want an image to animate into the background, switch to a different image, have a masked png file do some animation, have some words animate onto the screen in sequence, and then (and only then) I want the visitor to be able to move on to the next section of the screen.

Any help would be greatly appreciated!

Thanks!

Teh fabolous @PixelGeek did a nice livestream about #stickyscroll here CSS Sticky and Webflow Animations - Tutorial - YouTube

3 Likes

Thanks again Fabian. That really helped. I “liked” your reply but didn’t do an actual replay, so here it is. :wink: