gem Posted July 10, 2023 Share Posted July 10, 2023 Hello! On page load I am trying to create am animation where certain elements fade in. On these same elements I have a scrolltrigger that moves the elements around and animates the opacity to 0. Each animation works without each other, but when trying to run both it does not work. After the initial fade in, once the user scrolls the elements disappear. Any help is greatly appreciated. Thank you! See the Pen ZEmaqJV by bonfiremitch (@bonfiremitch) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted July 10, 2023 Solution Share Posted July 10, 2023 Hi, A few things. First and foremost is the fact that ScrollTrigger has a configuration option called immediateRender. This basically tells ScrollTrigger to not render the GSAP instance immediately which is causing the problem. To make it short when your code runs the boxes have an opacity of zero, so when it first renders that instance (the one controlled by ScrollTrigger) takes that as the starting point of the animation, so basically GSAP is taking the elements from opacity 0 to opacity 0, so as soon as you scroll a bit, they disappear. Is not a bug just the way things work and why the immediateRender option is handy in these cases. Another thing is that you can create a single GSAP instance for both cases and no need to create a separate ScrollTrigger instance for each element. In the case of the first animation you can use stagger to separate each instance: https://greensock.com/docs/v3/Staggers In the case of the ScrollTrigger instance you can use function based values which in the case of an array will loop through the elements passing the index to a function. Here is a fork of your codepen: See the Pen WNYXYVb by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
gem Posted July 10, 2023 Author Share Posted July 10, 2023 @Rodrigo This is exactly what I am looking - thank you so much!! 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