A delay between two gsap animation

[achraf]

GSAP Starter Template (codepen.io)

I have this issue where I have a text stager animation between characters and a second animation image where images go down I tried so hard to make the second animation (the image one) only start after the text stagger with a  delay of one second so it will go like first animation + 1sec + second animation start, since the first animation the text one uses a for each loop if I added them to the same timeline the first animation get this issue each character of the first animation get treated separately which not smooth at all. so I hope someone can help me in this matter it is without a doubt been hard to find a solution 


I apologize in advance because I couldn't add the libraries I use to the codepen for text splitting but Im hoping for a solution to how to add delays between two forEach methods where adding a timeline make the animation not smooth as suppose to be 

See the Pen vYbxvvg by achrafalijate (@achrafalijate) on CodePen

[mvaneijgen]

Hi @achraf welcome to the forum!

 

I've made your pen working and add some tweaks to it. I've use GSAP SplitText plugin, because that works with GSAP perfectly. Your character animation didn't do anything (or am I missing something?), so I've set them to animate to y: -20. I've add this all to the timeline you already had created. And in between the text and the image animation I've added a tween that does nothing for 1 second. Is this what you're looking for? 

 

See the Pen KKJWOaQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

[achraf]

See the new issue now is that the text animation isn't smooth that way I had to put it in its gsap.to because since it goes over each character at once it doesn't look good once added to a timeline.
Yes you are right the animation didn't work in the code pen because I'm new to that platform but generally you did well with the animation the only issue now at hand is that after both animations added to a timeline the image one works perfectly but the text it's not good to look at so I was wondering if there is a way to a delay two animation without a timeline or add a text animation to a timeline without making like look that ugly 

[mvaneijgen]

Maybe you could explain what you are seeing and finding "ugly" and "not smooth", because to me it seems really smooth and ugly is relative, so telling us what you're seeing and what you like to see instead would be more helpful. 

 

A GSAP tween and a tween on a timeline are in theory the same thing, so they shouldn't be any different, however a timeline will play all the tweens in sequence, so I have more the feeling that you want to tweak the timings of things, but that is much easier to do with a timeline or at least more easier to manage.

 

So again I would strongly recommend taking a look at the getting started guide, which will explain all this in detail https://gsap.com/resources/get-started/

 

I've now changed your foreach loop to a tween with a stagger, this will animate each letter in a staggered fashion. The same as you did with the delay, but with this you don't have to calculate anything GSAP will handle it all for you. Also take a look at the position parameter with which you can tweak even more. 

 

Hope it helps and happy tweening! 

 

See the Pen PoVmqRd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen