Jump to content


Having trouble understanding TimelineMax

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated.


What I'm trying to do in my code- Each time the v-shaped silver svg translates  away from its initial position and back, the text changes, to a different one, similarly it happens once more.


Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue,  thanks in advance and hope you guys have a great day!

See the Pen VGEYeZ by goprime (@goprime) on CodePen

Link to comment
Share on other sites

Hm, your SVG doesn't seem to be set up to do this type of thing really well, but here's a fork of your codepen that splits things up into some functions that spit back timelines that you can nest into a master timeline to keep things more organized: 



I'd strongly recommend reading this article that explains this concept: https://css-tricks.com/writing-smarter-animation-code/


Does that help at all?  


  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Thanks for the demo. Its very helpful.


Since you are new to the platform this is a great challenge to try to tackle as a beginner, however it appears you are trying to do some optimizations (like creating loops) before really understanding how things work.


There are a few errors and things I don't understand that are probably just due to experimenting and lack of experience (which is TOTALLY fine) and I don't want to spend a lot of time picking it apart but some things to note:


  1. you shouldn't be assigning multiple tweens to the same tween variable (var tween = TweenMax.to())
  2. you can't put repeats on TweenLite tweens, only TweenMax tweens
  3. instead of using animation.add() you should use animation.to() to save a lot of typing (see my example below)

Most importantly, when working with timelines its crucial to understand the position parameter. You should be using it instead of delays on each tween in your timeline. Please study this page: https://greensock.com/position-parameter - Once you understand that page you will be well on your way to becoming a timeline master.


In cases like this I would strongly suggest working with a very very reduced example (as little HTML and CSS as possible) and writing the code long-form (no loops) so that you get the basic effect you want working correctly, with the right timing BEFORE you try to refactor it and make it shorter.


Please take a look at my example. It may not be exactly what you want, but should be a good starting point. Once you get the text hiding and revealing they way you want, then you can try to work with a more complex svg, additional elements and different effects for the wipe.


See the Pen ZMqeQx?editors=0110 by GreenSock (@GreenSock) on CodePen





  • Like 6
  • Thanks 1
Link to comment
Share on other sites

@Carl @GreenSock Hi, thank you for the reply, and for the links, I'm just feeling confused by the code, you guys replies really helped a lot, thanks, and have a great day!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.