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
1 Like
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”
Help me someone! 
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.
We clarified the title of this post so more people might stumble across it who face a similar design challenge with their projects.
3 Likes
