Streaming live at 10am (PST)

Animation occurs before section scrolls into view


#1

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


#2

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


#3

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


#4

#5

Help me someone! :sob:


#6

Help has arrived! :sunglasses:


#7

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.


#8

:joy::joy::joy:


#9

Great thank you @McGuire !