RichSock Posted April 16, 2021 Share Posted April 16, 2021 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 comment Share on other sites More sharing options...
akapowl Posted April 16, 2021 Share Posted April 16, 2021 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 4 Link to comment Share on other sites More sharing options...
mikel Posted April 16, 2021 Share Posted April 16, 2021 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 comment Share on other sites More sharing options...
akapowl Posted April 16, 2021 Share Posted April 16, 2021 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. 2 Link to comment Share on other sites More sharing options...
RichSock Posted April 16, 2021 Author Share Posted April 16, 2021 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 comment Share on other sites More sharing options...
RichSock Posted April 19, 2021 Author Share Posted April 19, 2021 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now