Trying to combine 2 independent animations

[Joey Leon]

I've been learning GSAP's basics for a while and created a simple timeline for animations on my hero section. Next, I created a cycling text animation from Snorkl.tv's video. They both work independently, but when I try combine the two it's not working the way I want it to. I know theres an intermediate step I have to do to seamlessly combine the 2 but I can't figure out where to start.

Aim: animateElements triggers -> timeline with animations -> animations finish -> start cyclingText.

Problem: I think it's a css issue but when my timeline with animations start, my cycling text spans orginally start 'stacked' on top of one another, when I want only one of the spans to show itself on default.

I'm guessing this is a css issue, but if I change the css then I'm guessing the animation logic would have to change? A step to the right direction would be gladly appreciated.

Problem in question:

See the Pen NWeEyBK by Joseph-Leonardi (@Joseph-Leonardi) on CodePen

[Carl]

Thanks for the demo. You did a good job.

The main issue is that you aren't setting up your cycle timeline until after the headings slide in.

This caused you to see all the words on top of each other in their "pre-animated" state.

 

I did a few things 

• I set the cycleWords function to return the timeline
• I called the cycleWords function before the main timeline was built
• I paused the cycleWords timeline at a time of 1 (this makes only the first word show)
• I changed your onComplete callback on the main timeline to tell the cycle timeline to play

See the Pen BavGPpo?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

[Joey Leon]

Hi, Thanks for the help, I was unable to properly think how to solve my issue, but would never have thought to start the animation but have it in a paused state, then resume once my original sliding in has occured! Thanks for the insight!