eli-ott Posted April 12, 2023 Share Posted April 12, 2023 Hello, so I have a 3D element made with Three.JS that is perfect. I try to modify it with gsap and scrollTrigger. I tried to do it with one trigger first and it worked perfectly. But when I try to to multiple changes to that element at different time with scrollTrigger it changes the original element's value. Like in the codePen when you first scroll you see that the square is not really a square at the begining but when you scroll a bit more It jumps to a square. And I don't know at all why it happens. I also tried to put a fromTo to all but did not change a thing. I really need help plz :)) See the Pen KKGdBxK by eli-ott (@eli-ott) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 12, 2023 Solution Share Posted April 12, 2023 Hi, You should use a Timeline and the position parameter in order to trigger all the animations at the same time: https://greensock.com/docs/v3/GSAP/Timeline Also the reason for the jump you're seeing is because you have a fromTo instance that is animating the scale on a specific axis. The issue here is that GSAP is super optimized so it records all the values at runtime and then interpolates between them. From and fromTo instances are very special since it takes the element from a value you're giving it to the value they have when the GSAP instance is created. So in this case you have a box, then GSAP creates that instance and says: "OK so take this box's scale and animate the z value from this value to this other", and GSAP does exactly what you're asking and sets the value to the one you're passing in the from config object. See the issue? The solution for this is to tell GSAP to not render or apply those changes yet using immediateRender: false in your config: gsap.fromTo( box.scale, { z: 0.175, }, { z: 0.25, immediateRender: false, }, "<" ); Here is a fork of your codepen: See the Pen mdzeQKK by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
eli-ott Posted April 12, 2023 Author Share Posted April 12, 2023 Thanks a lot for all the knowledge shared and the advices. It helped a lot to find the perfect solution!! 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