Jump to content
Search Community

Start paused timeline from other timeline

spacewindow test
Moderator Tag

Go to solution Solved by Diaco,

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 team,

 

this should be an easy one.

 

I have two timelines  the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline.

 

I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'.

var overTL = new TimelineMax({paused: true, repeat: -1});
var mainTL = new TimelineMax();

overTL
.to('#element', 1, {property:value})
(etc...);

// MY FUNCTION FOR PLAYING IT so I can use it from mainTL

function playIt(timeline, offset){
    timeline.play(offset);
}

mainTL
.set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust')
// CUE overTL at this point
.set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust')
.to('#neonfade', 1, {opacity: 0},'startDust+=0.3')

(mainTL continues ...);

I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation.

 

I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin.

 

Sorry I'm sure this must be obvious, thanks.

Link to comment
Share on other sites

  • Solution

Hi spacewindow :)

 

you can simply call your functions where you want in timelines :

mainTl
  .to( obj , 1 , {} )
  .to( obj , 1 , {} , 'label' )
  .add( function(){ anotherTl.play() } , 'label' ) // start/run functions and tweens with same label at the same time
  .to( obj , 1 , {} )
  .to( obj , 1 , {} , 'label2' )
  .add( function(){ anotherTl.pause() } , 'label2' )
  • 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.
×
×
  • Create New...