noahr Posted January 6, 2023 Share Posted January 6, 2023 Hey there, I've got a ScrollTrigger to animate some "floating" objects (parallax) with randomly generated positions, and if I click on one of the objects, it fades out, then receives a new random position and then fades in again. However, I am struggling to integrate all this together with the ScrollTrigger effects - As you can see in my demo, the objects jump around when spawning/scrolling, because the position is not calculated correctly anymore. I thought I might need to update or create a new ScrollTrigger each time I hand out a new position - how would I do something like that? Or is there a better, more elegant solution? Thanks a lot! See the Pen GRBNWbL by fltng (@fltng) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 6, 2023 Solution Share Posted January 6, 2023 I think you could simplify it to something like this: See the Pen KKBNqEJ?editors=0010 by GreenSock (@GreenSock) on CodePen The problem with your original version was that you were setting up a scroll-linked yPercent animation for each one, but then on click, you were creating a completely different (competing) yPercent animation on the same element. So they were both fighting. You can't logically have it going to two different places at the same time. So I just switched to using "y" for the enter/exit portions, and keeping "yPercent" for the standard scroll-linked animation so that there's no competing. I also cleaned up some of the other code. Like you can use .set() instead of doing a .to() with a zero duration. Is that more like what you were looking for? 1 Link to comment Share on other sites More sharing options...
noahr Posted January 6, 2023 Author Share Posted January 6, 2023 Wonderful, 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