Streaming live at 10am (PST)

Animation occurs before section scrolls into view

Animation of elements in the block “NEW ARRIVALS” triggered before I scroll to him.
http://hollister-bc288c.webflow.io/
https://preview.webflow.com/preview/hollister-bc288c?preview=86a56587fec00c58eea1bf99fb590d88

Look at the interactions panel - page scroll - first one - 10% offset. Change it to 80% for example and see the difference in preview mode…

Excuse me, please, I did not specify the name of the block. It’s a “NEW ARRIVAL”

1 Like

Help me someone! :sob:

Help has arrived! :sunglasses:

Let’s break down what’s happening here:

Your New Arrivals section — and really all of these sections — are reacting to the page being scrolled. The New Arrivals animation is occurring when the page is scrolled down 10%. That doesn’t work too well because you have to scroll down 40% of the page or so until you even hit the New Arrivals section.

But there’s a solution! Enter: Element Triggers.

STEP 1: Delete the offending trigger.


Under Interactions, find the New Arrivals page trigger. Delete it.

STEP 2: Create a better one.


Select the Second Collection div block (your New Arrivals section) and add an Element Trigger.

STEP 3: Define your action.

(When scrolled into view, Select Action >> Start an animation.)


You can now set your offset to 10% (or whatever you want — a higher number might work better here) based on when the section enters the viewport. Set it to trigger the New Arrivals timed animation.

STEP 4: Celebrate.

:fireworks: :+1:

We clarified the title of this post so more people might stumble across it who face a similar design challenge with their projects.

2 Likes

:joy::joy::joy:

Great thank you @McGuire !