Jump to content
GreenSock

redrooster

Master timeline concept - adding delays to when each animation is called

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 all,
 
I was hoping you could solve this problem I am having, I have read through the forums but cannot seem to find an answer / logical solve to the following:
 
I have a series of functions that each have a part of an overall animation. I am using a master timeline to add each of these two, so that they fire in series.
 
I want to add a delay between when one finishes and the next starts, here is a simplified example of what I need:
 
master.add( showImage())
   //I would like to set a delay here until 'fadeImage' starts
   .add( fadeImage(), "showText")
   .add( showText(), "showText") 


function showImage() {
   var tl = new TimelineMax();
   tl.set(bgImage, {opacity: 0, scale: 1.2});
   tl.to(bgImage, 2, {opacity: 1, ease: Sine.easeOut}, "sweepIn");
   tl.to(bgImage, 1, {scale: 1, ease: Sine.easeOut}, "-=2");
   return tl;
}

function fadeImage() {
   var tl = new TimelineMax();
   tl.to(bgImage, 2, {opacity: 0.1, ease: Sine.easeOut});
   return tl;
}

function showText() {
   var tl = new TimelineMax();
   tl.set(title, {opacity: 0, scale: 1.5});
   tl.set(subHead, {opacity: 0, scale: 1.5});
   tl.to(title, 2, {opacity: 1, scale:1, ease: Sine.easeOut}, "sweepIn");
   tl.to(subHead, 1, {opacity: 1, scale: 1, ease: Sine.easeOut}, "-=2");
   return tl;
}

Thanks,

 

Link to comment
Share on other sites

master.add(fadeImage(), '+=1') // delay by one second

Would this work? what's the string 'showText' for?

  • Like 1
Link to comment
Share on other sites

majorkuanagi, "showText" is a label. Totally valid. Labels are used in many of the timeline methods. Checkout the examples in add() http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/

 

 

redrooster, you can add a position parameter as majorkuanagi suggested. In this case it makes the most sense to add your label where you want it with proper positioning then add the timelines at that label.

 

if you want fadeImage() and showText() timelines both added at the same label 2 seconds after showImage() timeilne do

 

master.add( showImage())
  .add("showtText", "+=2") // add label 2 seconds after showImage()'s returned timeline is done
  .add( fadeImage(), "showText")// add at showText label
  .add( showText(), "showText") // add at showText label

Definitely check out the video on the position parameter: http://greensock.com/position-parameter

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