Have the 1st item item of collection list animate onload

Design help Animations & Interactions
1

So I have a collection list that takes up half of the home screen on desktop, but moves down to the second row for tablet/mobile. Each list-item has an animation trigger when it scrolls into view. However, because this animation only triggers onScroll, the 1st item appears blank on desktop.

Is there a way I can trigger the list-item animation only for the 1st item, on desktop, onLoad ?

Here is my public share link: LINK

2

Only by limit + create two lists.

Show 1 limit 1 (Like “first”)

image
image1034Ă—723 177 KB

duplicate collection - and start at 2
image

Now use diff animation for each collection (Or in your case remove the animation from item 1).

You should also duplicate the class (Because the animation related to class name). Than webflow auto change the interaction target (So also update the target).

1 Like
3

Thanks! I’ll give it a try.