We’re experiencing a problem with mixed trigger methods to animate collection items.
- A collection list is displaying multiple collection items on a page
- Each collection item is a full-screen section
- Each collection item has a custom animation applied to its children
- The animation is triggered When scrolled into view
→ Current situation 21/08/2019
→ Animation on zero and first state illustrated
- When scrolled into view works fine for all items, exept the first collection item, which is already in the viewport. The animation doesn’t play until the user scrolls a few pixels.
- When applying on page load as animation trigger, all the
.company--sectionon the complete page are animating. This is not our goal.
- Play animation of first
.company--sectionwhen the element is already in the viewport, so directly on page load.
- Animate rest of collection items on When scrolled into view as our current situation.
- Is it possible to have both on page load and when scrolled into view applied to collection list items to create our desired situtation?
Any help or creative workarounds are much appreciated
Here is our public share link of the current situation 21/08/2019: LINK