sepatate out tween of properties

[magnetik]

Is there an easy way to tween something like the x position and have an opacity fade start halfway through it?

[Carl]

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

 

 

[magnetik]

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!

[mvaneijgen]

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.