Jump to content
Search Community

how to control timeline in function?

Sandschieber test
Moderator Tag

Go to solution Solved by Carl,

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

I have different animations and need therefore timelines in function, that's how I understood it, anyway.


Now I like to control about the timelines in these functions and dont know how to do that.


Here are two Codepen examples:

first without Function is running, but I need to get the second one running.


without function:


and with function:

See the Pen ALqBXL by opendoors (@opendoors) on CodePen




See the Pen jrBOEg by opendoors (@opendoors) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the demos. Very helpful.

As i understand the issue, this is just the way scope works in JS. You can't access variables defined in functions. What I would recommend is that your function that creates the timeline also returns it like so:

function resetTl(){

function isactiveAnimation(){
  TweenLite.set(logo, {left:0});
var tl = new TimelineMax();
  tl.to(logo, 0.8, {left:"+=300",opacity:0.2});
  return tl;

//isActiveTL is now the timeline that isactiveAnimatio() creates and returns
var isActiveTL = isactiveAnimation();


  • Like 2
Link to comment
Share on other sites

Carl is right!

This is my other solution!


See the Pen XjrbWQ by Waren_Gonzaga (@Waren_Gonzaga) on CodePen


  logo	= $("#logo"),
	isactiveCt = $(".isactive");


function resetTl(){

function init() {
  TweenLite.set(logo, {left:0, onComplete: isactiveAnimation});

function isactiveAnimation(){
	var isactiveTL = new TimelineMax();
  isactiveTL.to(logo, 0.8, {left:"+=300",opacity:0.2});

$(".bt").click(function() {

Hope it helps!

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