magnetik Posted October 3, 2023 Share Posted October 3, 2023 Is there an easy way to tween something like the x position and have an opacity fade start halfway through it? Link to comment Share on other sites More sharing options...
Carl Posted October 3, 2023 Share Posted October 3, 2023 Hi and welcome to the GreenSock forums, This would be an excellent use of a timeline const tl = gsap.timeline() tl.to(object, {x:300, duration:1}) tl.to(object, {opacity:0, duration:0.5}, 0.5) // starts at 0.5 seconds Be sure to read the Timeline Docs and watch my video in there 3 Link to comment Share on other sites More sharing options...
magnetik Posted October 4, 2023 Author Share Posted October 4, 2023 Thanks for the help Carl. I was hopping for something that was more inline. I am using stagger class and things start getting really messy when doing it like the above. Is there a way to write in the delay to the opacity attribute? This is what I am looking at. tl.to(".lgosAnima1s", {duration:4, y:-520, opacity:0, onRepeat:faderIn, stagger:{each:.1, from:"end", ease: "power1.in"}, repeat: -1, repeatDelay: 4}); Thanks! Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 4, 2023 Share Posted October 4, 2023 Messy? This seems pretty clean to me. Can you provide a minimal demo, so that we can take a look at your setup, because maybe we're missing something from just the explanation. Keep in mind that you can also move the repeat and repeatDelay to the timeline instead of putting it on the tween. You could also look in to keyframes, see the post. But what @Carl posted is in my opinion the best way to do it. 2 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