[ScrollTrigger, don't trigger elements in viewport onload]

I managed to get it working, here was my final code:

 

const sections = document.querySelectorAll('section');
let loadingSectionAnimation = true;

sections.forEach(section => {
    const sectionHeader = section.querySelector('h1');
    const sectionAnimation = gsap.from(sectionHeader, {
        paused: true,
        duration: 2,
        yPercent: 200,
    });
    
    ScrollTrigger.create({
        trigger: section,
        start: 'center bottom',
        onEnter() {
            if (loadingSectionAnimation) {
                gsap.set(sectionHeader, {
                    yPercent: 0,
                });

                return;
            }

            sectionAnimation.play();
        },
    });
});

loadingSectionAnimation = false;

Thank you for your help

[ScrollTrigger, don't trigger elements in viewport onload]

Thank you both for the solutions and ideas,

 

I think I will experiment with the idea of setting a variable like you've suggested, I will let you know how I get on.

[ScrollTrigger, don't trigger elements in viewport onload]

Hi,

 

It's a pretty simple one but I can't seem to find any other posts which have covered this.

 

I'm wondering if it's possible to NOT animate elements which are already in the viewport on load when using scrollTrigger.

 

In my codepen example the text within the first section would be static, but the text in the second and third sections would slide up. I'm unable to simply remove the class from the first section as the content will be pulled via a CMS, also the page could potentially be refreshed half way down, in that case whatever elements are then in the viewport at that point in time would need to be static.

 

Many thanks

See the Pen jOyKdqL by Richm8 (@Richm8) on CodePen