Streaming live at 10am (PST)

Recreate animation


#1

Hi guys,

I am trying to recreate the arrow animtion from this website: https://aju.dk
Any ideas how to do it natevly in webflow?


#2

Hi Josef!

Looks like its seeing its a basic move and opacity interaction on a loop.

Set the div container that holds the arrow to overflow: hidden

Then select that div and go to interactions, you can set that as a scroll into view trigger or however you want that interaction to behave (make sure you check “Loop”)

Create a move animation to something where the arrow is outside of its div container (do this on the Y-axis and set that as an initial state, do the same for opacity.) Then add another keyframe to have it move into view (play with the Y-Axis number) (Add an opacity to 100% on the second keyframe).


initialState

32%20AM
37%20AM

20%20AM

Hope this is clear enough to understand. Let me know if theres anything I can do to help further!