Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DeeDubs

Accessing timelines that are held within functions

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 There, I have been building banners for a while using GSAP for my animation (great tool BTW) and I have always structured the animations along the follow way:

 

function frame1build(){
 var tl = new TimelineMax();
 tl.from('#item', 0.7, {animate properties}); 
 return tl;
}

function frame2build(){var tl = new TimelineMax();
 tl.from('#anotherItem', 0.7, {animate properties}); 
 return tl;
}

function startAd(){ 
 var tl = new TimelineMax({paused: true}); 
 tl.add(frame1build())
 .add(frame2build()); 
}

 

and so on...startAd() is called on the ad loading.

 

this has always worked great as i can separate my frame animations into separate functions, adjust the timings in the main startAd function timeline so they overlap etc

 

what has always stumped me is how I can cross call or reference these. Or for example if i wanted to add a timeline that had a looped animation I can add it like below: 

 
function loopedAnimation(){
 var tl = new TimelineMax({repeat: -1, repeatDelay: 1});
 tl.to('#loopItem', 0.2, {left: '+=10', opacity: 0, ease: Power2.easeIn}, 0.2);
 return tl;
}


function frame1build(){
 var tl = new TimelineMax();
 tl.from('#anotherItem', 0.7, {animate properties})
 .add(loopedAnimation); 
 return tl;
}

and this works fine too... what I cant work out is how I can access the timeline within loopedAnimation to stop it or pause it etc from within a different function tl (ie in frame2build I want to stop the looping)

 

I tried things like .remove(loopedAnimation) but it just stops the whole thing working, similarly cant work out how to access play or pause ?

 

How do I got about accessing/controlling them?

 

Thanks

 

Dave

 

Link to comment
Share on other sites

I'd say there's a question within a question here and therefore two answers.

 

1) Accessing/Controlling timelines returned from functions.

 

All you're missing is to assign them all into a variable or a master timeline. If you were to do something like:

function frame1build(){
var tl = new TimelineMax();
tl.from('#item', 0.7, {animate properties}); 
return tl;
}

function frame2build(){var tl = new TimelineMax();
tl.from('#anotherItem', 0.7, {animate properties}); 
return tl;
}

function startAd(){ 
var tl = new TimelineMax({paused: true});
tl.add(frame1build())
.add(frame2build()); 
} 

var main_tl = startAd(); 
// Now you can access all its properties
main_tl.play();

2) Looped timelines within timelines. Now things get a tad funky. Infinitely looping nested timelines/tweens are always problematic if you are not careful. They will create a point in your timeline that has no end. That can cause all sorts of issues when trying to get totalDuration(), progress() and such. Also, trying to play beyond a nested infinite timeline/tween will require a label as its length/duration is infinite.

 

The answer lies on what exactly is it that you are trying to achieve but for the sake of giving you ideas, here's one way you could handle this situation and uses that infinite looping timeline you presented. 

function loopedAnimation(){
// Let's change this to be paused to begin with
var tl = new TimelineMax({repeat: -1, repeatDelay: 1, paused:true});
tl.to('#loopItem', 0.2, {left: '+=10', opacity: 0, ease: Power2.easeIn}, 0.2);
return tl;
}

function frame1build(){
// Get a reference for your looping animation
var loop = loopedAnimation();

var tl = new TimelineMax();
tl.from('#anotherItem', 0.7, {animate properties})
.addCallback(loop.play) // WARNING THIS IS WRONG - SEE MY OTHER POST BELLOW
// do something else
.addCallback(loop.pause) // WARNING THIS IS WRONG - SEE MY OTHER POST BELLOW
return tl;
}
Edited by Dipscom
Added notice of my mistakes
  • Like 3
Link to comment
Share on other sites

Thanks for this, the second approach looks very much like what I was trying to do... however, having tried it out it the .addCallback(loop.play) doesn't start the paused animation, is there something else I need to be considering?

 

I put it into a codePen to show :

 

See the Pen ygKaWp by anon (@anon) on CodePen

Link to comment
Share on other sites

Great advice from Dipscom.

 

That's a nice demo, DeeDubs.

 

I"m not entirely sure what the end goal is but if you want to create a timeline in frameBuild1() that contains looping timelines that are returned by other functions you could do this:
 

 

function frame1build(){
  var loopArrow = buttonArrowMove();
var loopGlow = buttonGlowAnimate();


  var tl = new TimelineMax();
tl.from('.txt1', 0.7, {scale: 50, opacity: 1, ease: Power1.easeOut, transformOrigin:"center center"})
  //fancy add two things at once
.add([loopArrow.play(), loopGlow.play()]) 


return tl;
}

http://codepen.io/GreenSock/pen/QdmpVd?editors=0010

  • Like 1
Link to comment
Share on other sites

Thanks for this, the second approach looks very much like what I was trying to do... however, having tried it out it the .addCallback(loop.play) doesn't start the paused animation, is there something else I need to be considering?

 

I put it into a codePen to show :

 

See the Pen ygKaWp by anon (@anon) on CodePen

 

My bad, I always forget the scope. It should have been:

function loopedAnimation(){
// Let's change this to be paused to begin with
var tl = new TimelineMax({repeat: -1, repeatDelay: 1, paused:true});
tl.to('#loopItem', 0.2, {left: '+=10', opacity: 0, ease: Power2.easeIn}, 0.2);
return tl;
}

function frame1build(){
// Get a reference for your looping animation
var loop = loopedAnimation();

var tl = new TimelineMax();
tl.from('#anotherItem', 0.7, {animate properties})
.addCallback(loop.play, "+=0", [], loop) 
// do something else
.addCallback(loop.pause, "+=1", [], loop)
return tl;
}

You can also use .call() they're effectively the same thing at the end of the day.

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/addCallback/

https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

 

I have noticed in your example pen that you are then nesting the frame1build timeline into another master timeline. I'd advise against using infinite looping tweens that deep. Unless you start using an object to keep track of all of those children and their scopes, you will have a headache.

 

Here's a fork of your pen with the extra parameters added to it.

 

See the Pen xgWWMr?editors=0010 by dipscom (@dipscom) on CodePen

  • Like 2
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.
×