Lins Posted March 6 Share Posted March 6 Hi GSAP Team, I have a requirement to create two timelines on the same object, my problem now is the animation looks jumpy when scroll fast (I think its because immediateRender: false) and also I think using "x" and "y" to moving the object is not a good approach. And I think I don't need "pin" for this requirement. Would you mind giving me the best approach for this condition? Hope you guys undertand what I need See the Pen BaEozbv by aditlin (@aditlin) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted March 6 Solution Share Posted March 6 The best approach is always one timeline with one ScrollTrigger and in this case the Flip plugin would be a great fit, check out this demo below. Hope it helps and happy tweening! See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Lins Posted March 6 Author Share Posted March 6 2 minutes ago, mvaneijgen said: The best approach is always one timeline with one ScrollTrigger and in this case the Flip plugin would be a great fit, check out this demo below. Hope it helps and happy tweening! Thank you for your fast respond @mvaneijgen Ah I see, so I need to reconstruct what I've done. Oh and one more, Is it possible to change the "image" when the last timeline triggered? My goal is to change the image when the image arrived on the left of wording (in my case is Mission Section). Hope you get it : )) Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 6 Share Posted March 6 1 minute ago, Lins said: My goal is to change the image when the image arrived on the left of wording (in my case is Mission Section). Just have two images and set one to opacity: 0, and one to opacity: 1 and then in the timeline at the end switch the opacity of the two. 1 Link to comment Share on other sites More sharing options...
Lins Posted March 6 Author Share Posted March 6 1 minute ago, mvaneijgen said: Just have two images and set one to opacity: 0, and one to opacity: 1 and then in the timeline at the end switch the opacity of the two. Interesting, thanks for the insight! I'll be back if I need a hand ~ 1 Link to comment Share on other sites More sharing options...
Lins Posted March 6 Author Share Posted March 6 13 hours ago, mvaneijgen said: Just have two images and set one to opacity: 0, and one to opacity: 1 and then in the timeline at the end switch the opacity of the two. Hi @mvaneijgen I did what I want with Flip! Thank youuuu. But based on my last question about changing images, do you have an example for that? 🤔 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 7 Share Posted March 7 Can you share your latest version? And changing the image could be done in several ways, we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If the image only needs to change when it is at the end point, I would set the image there, set its opacity: 0 and then in the timeline you already have, switch the one image to opacity: 1 and the other to 0. 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