Jump to content


Calling Timelines Nested Within A Function

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

Hello, Green Sock forum. I am having a few struggles which largely revolve around how to call and interact with time lines, which are nested inside a function. I have put together a very bare bones demo up on Codepen, which covers this.


The expected functionality is:


Click “click to run box”:


1: showContent function is called, which contains and runs the tlContent timeline.


2: onStart calls swapText function, which replaces large text with that contained in the data-text of the clicked nav link.


3: onComplete calls swapText function, which evaluates if tlContent is active, and determining it is not, replaces large text with that contained in the “stopped" variable.



Click “click to reverse tween”


1: tlContent time line is reversed.


2: swapText function is immediately called (something akin to an onReverseStart) before any part of the timeline visibly begins to reverse.


3: swapText function is called via onReverseComplete and should display again, the “stopped" variable.



So it’s basically a collection of difficulties I’m having, which are largely centred around how to call time lines which by necessity of needing to pass data stored in the clicked element, I’m wrapping inside a function. If there’s a better way to do this then I’m all ears.


In addition to this, I have researched the various forum posts which discuss the (completely understandable) lack of a native OnReverseStart call, with some suggesting that the callback can be replicated via the onRepeat call, but as an onRepeat call requires a repeat rate to be set, I couldn’t get the desired functionality in this example. Although I’ll confess to being a bit fuzzy on the specifics of the implementations suggested.


As ever, a hearty thank you to anyone who offers their time and insight to help me out. :)

See the Pen GZVveo by OneManLaptop (@OneManLaptop) on CodePen

Link to comment
Share on other sites

Before trying to dig through your code and trying to figure out every little piece I want to offer 2 suggestions


1: I think you can probably create your animation in advance for as many buttons as you like

2: using the TextPlugin will save you a lot of hassle as it will change Text and stay completely synched with your animation and be reversible.


//give each button an animation property
$(".box").each(function(index, element){
  var tl = new TimelineMax({repeat:1, repeatDelay:1, yoyo:true, paused:true})
  tl.to(element, 1, {y:200})
    //change text using TextPlugin
    .set(element, {text:$(element).data("text")})
    .to(element, 0.2, {backgroundColor:"yellow", color:"red"})
  this.animation = tl;




demo: http://codepen.io/GreenSock/pen/OXLPGN?editors=1010

  • Like 2
Link to comment
Share on other sites

Hey Carl, as ever thanks so much for looking at the demo and offering your advice. I've spent much of the morning experimenting with your suggestion and my demo and I'm much closer than I was in getting everything in the demo working. However there are still some noticeable issues and on reflection, the demo probably covers issues which perhaps go beyond the scope of what is reasonable to expect from a specialist, volunteer led forum such as this. Therefor I have decided to seek the assistance of somebody who can hold my hand - as it were - a little more and guide me through the logic of what it is I'm trying to achieve, in the hope that I'll develop a better understanding of the concepts and not just the nuts and bolts of working with time lines and functions.

Happy to share the eventual results in this thread when ready.

Thanks again. :)

  • Like 2
Link to comment
Share on other sites

Thanks for the kind and respectful post. Definitely let us know how things go. 

If it turns out you still need help, just try to isolate your specific issue as much as possible in a simple demo and we'll see what we can do.

  • 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.