Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RichSock

ScrollTrigger, don't trigger elements in viewport onload

Recommended Posts

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

Link to post
Share on other sites

 

Welcome to the forums @RichSock

 

I'm not sure if I missed something totally obvious, but if I did, I'm sure someone will come around and correct me.

I don't think there is an integrated method in ScrollTrigger that would let you do that just like that.

 

But you could always check whatever element you want to animate is in view currently with a simple helper function like covered here and not create a ScrollTrigger for that element in view. That could then look something like this.

 

See the Pen bb6edc7f1c3918d3c44570032de18ca5 by akapowl (@akapowl) on CodePen

 

 

Of course you would have to think about how you'd want to handle elements that have their start already been passed when the page is being refreshed because those would be animated right away then and if you scrolled up fast enough you would see them being animated. But by applying your own logic you could also get them to be exluded from the ScrollTrigger creation.

 

And you would probably have to tweek the helper function to your liking, because as of now it will only respect elements that are completely in view.

 

Hope that helps a bit though.

 

 

Edit:

Here is another way, not checking if a section is in viewport, but on a boolean-variable instead (here startingUp).

 

Only if that variable returns false (which it is being toggled to after the creation of your ScrollTriggers), the onEnterCallback will trigger the animation to play - else it will set the element to its final position.

 

This might be a better way with regard to having the animation being triggered later on because it allows you to still create ScrollTriggers for each of your elements and doesn't exclude any.

 

See the Pen 9696ea82f24c511ec882e907f3d73c62 by akapowl (@akapowl) on CodePen

 

 

  • Like 4
Link to post
Share on other sites

Hey @RichSock,

 

You could also use the  :not() property, a negation pseudo class.

 

See the Pen poRKmaV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

Link to post
Share on other sites
3 minutes ago, mikel said:

You could also use the  :not() property, a negation pseudo class.

 

Yep, you could, but I didn't suggest that because it only works for when that first section is in view on load and RichSock wanted it to work for whatever section is in view on (re)load.

 

  • Like 2
Link to post
Share on other sites

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.

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×