Need Animation to Start After Completion of Separate Animation Toggled by Click

[msolari 7 Likes (Newbie)]

Hi all,

 

My issue here is a bit two-fold. I've been making steady progress on this project, but I've hit another wall.

 

The first issue is that since I've added my Timeline for the second animation, the animation opens immediately on browser load.

 

The second issue is that my Timeline doesn't seem to be running the .fromTo() I've defined for it.

 

So what I'm attempting here is to define the first animation, define the second animation, toggle the first with click, toggle the second with timeline onComplete of the first animation, and then to be able to reverse the whole sequence on click again. I've made a mess of my code I think and I'm having a hard time piecing it all together. 

 

I feel slightly bad about having so many questions/requests for assistance. If I'm asking an inappropriate amount or types of questions please feel free to let me know, I wouldn't want to violate any forum rules.

 

Whatever you can help me with I will greatly appreciate and I thank you in advance.

See the Pen aVeYaO by msolaridesign (@msolaridesign) on CodePen

[Sahil 2,541 Likes (Superhero)]

No we don't have any quota for questions, so feel free to ask questions whenever you get stuck. Just it makes it easy for us when someone reads/follows tutorial when we suggest something. So if are getting stuck on new issues or something is complex for you to understand everybody here will be happy to help. And sometimes it is easier to ask for help rather than banging your head for hours, so don't worry about it.

 

As for your question, you are using a tween rather than timeline. You can always set it's 'paused' property to true so it won't auto play.

 

Your fromTo tween isn't playing because you aren't calling that fadeIn function anywhere in your code.

 

See the Pen xPvjwR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

If you haven't seen already you should go through these videos which will help you a lot,

 

https://www.youtube.com/watch?v=sXJKg8SUSLI

 

https://www.youtube.com/watch?v=tMP1PCErrmE

 

https://www.youtube.com/watch?v=QO1mLs96krY

 

https://www.youtube.com/watch?v=ZbTI85lmu9Q

 

https://www.youtube.com/watch?v=8ETMjqhQRCs

[Sahil 2,541 Likes (Superhero)]

@msolari Another issue that puzzled me is, you are defining a 'tlcA' timeline which basically has no duration. So as soon as page loads, the 'tlcA' onComplete callback is called which animates the main animation.

 

For this animation you don't really need to use any callbacks, you can do same thing by using one timeline. Though I don't see any benefit of setting opacity here.

 

Well, just to add a little more, it also helps us a lot when demos are simple and all ids, classes and variable are have descriptive name. Again, feel free to ask any questions.

 

See the Pen wPVjOw?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

 

[msolari 7 Likes (Newbie)]

These videos are bomb.

 

And your example helped me fix my issue well.

 

My .fromTo and .reverse() needed to be below my Tween and it works great now. I was defining too many variables and I lost sight of my goal.

 

You really helped me get back to basics here.

 

Thanks so much