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--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
Is it possible to have both on page load and when scrolled into view applied to collection list items to create our desired situtation?
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
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://discourse.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?
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.
@sam-g@elisevanoosten hi!! I’m hoping to use this script on my site to deal with the same issue from this thread, but I’m kind of a code noob. how can i implement this code? where should i place it in my site?