How to animate first collection item on page load, others when scrolled into view?

[danoszz (Daan)]

Webflow Community,

We’re experiencing a problem with mixed trigger methods to animate collection items.

Current situation

• A collection list is displaying multiple collection items on a page
• Each collection item is a full-screen section .company--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

Problems

1. 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.
2. When applying on page load as animation trigger, all the .company--section on the complete page are animating. This is not our goal.

Desired situation

• Play animation of first .company--section when 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.

Questions

1. Is it possible to have both on page load and when scrolled into view applied to collection list items to create our desired situtation?
2. Can we manually trigger Webflow animations through Javascript as a workaround?

Any help or creative workarounds are much appreciated

---

Here is our public share link of the current situation 21/08/2019: LINK

[sam-g]

Try @elisevanoosten script from this thread: IX 2.0 - Scroll into view not activating until the page is scrolled a bit

It will scrolle the window on load a single pixel and back to the top, which I’ve found not noticeable and will trigger the scroll interactions.

<script>
  function init() {
      window.scrollTo(0, 1);
      window.scrollTo(0, -1);
  }
  init()
</script>

[danoszz (Daan)]

Thanks, @sam-g for the swift reply. This is indeed a creative solution, unfortunately, this doesn’t work in our case.

This is our custom code right now.

<script src="https://bundle.run/css-scroll-snap-polyfill@0.1.2"></script>
<script>

  function init() {
 	
  // Set true VH 
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
  
  // Fire up scroll to snap polyfill
  cssScrollSnapPolyfill();

  // Scoll a bit up and down to trigger animation
  // Source: https://forum.webflow.com/t/ix-2-0-scroll-into-view-not-activating-until-the-page-is-scrolled-a-bit/52309/19
      window.scrollTo(0, 1);
      window.scrollTo(0, -1);
      console.log('scrolled');
  };
	
  // On resize fire up scroll to snap  polyfill
  window.addEventListener("resize", cssScrollSnapPolyfill);
  
  // Call initial function
  init();
  
</script>
<style>
.body.companies--page {
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y mandatory;
}

.collection--companies .company--section {
	scroll-snap-align: start;
	position: relative;
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
}

.collection--companies .company--section:nth-child(1) {
        height: calc(var(--vh, 1vh) * 100);
}

/* Make footer showup */
.body.companies--page footer {
	scroll-snap-stop: always;
	scroll-snap-align: end;
}

</style>

I’ve tested also without the custom code it but no luck. It seems it doesn’t scroll at all. Do you know why scrollTo() does not work in this specific situation? Is Webflow blocking this behaviour?

[jakubfoglar]

Hey Daan! Have your figured this out in the end?
I have a similar situtaion, where I want the first collection item to animate with the page load, and the rest with a scroll into view animation.

Thanks!