Jump to content
Search Community

playing a nested timeline in a function

K Rob test
Moderator Tag

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

Hey guys,

 

I'm putting together a master timeline that contains several different timelines.  I want to be able to play only the timeline that I choose when I click a button.  The timelines share the same div elements but animate them differently.    Unfortunately I haven't gotten that far yet.  Here is my JS Fiddle of what I have so far... http://jsfiddle.net/upAC5/

Right now when I call the main time line function it only plays the first timeline.  What am I doing wrong.  It's late and I have checked out the docs and some codepens but my brain is not grasping the idea of how to manipulate timelines that are inside of functions.  

 

Thank you.

 

K_Rob

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks a ton for providing the demo. Love to see that.

 

It was a lot of code to digest so I couldn't plow through all of it and figure out what was happening to what when, but I think I see the issue. You are very close.

 

The problem I believe is that when you are building your banner timeline:

 

function bannerOneTimeline(){
var banner_one = new TimelineMax();
banner_one.add("scroll")
.add(scrollOneBanner(), "scroll")
.add("flip") 
.add(flipOneBanner(), "flip")
.add("pop")
.add(popOneBanner(), "pop")
.add("particle")
.add(particleOneBanner(), "particle")
}; 


bannerOneTimeline();

You are calling a bunch of functions that create timelines, but they are not getting inserted into the timeline and as such they probably aren't playing in sequence as you intended.

 

The trick here is to modify your timeline-creating functions so that they return the timelines you create.

 

Please take a look at this basic codepen example and let me know if that helps:

 

http://codepen.io/GreenSock/pen/nojKy

//each of the 3 functions below create a timeline and return the timelinefunction firstBox() {
  var tl = new TimelineLite();
    tl.to("#box1", 1, {rotation:360})
    .to("#box1", 1, {opacity:0})
  return tl;
}


function secondBox() {
  var tl = new TimelineLite();
  tl.to("#box2", 1, {top:100})
    .to("#box2", 1, {opacity:0})
  return tl;
}


function thirdBox() {
  var tl = new TimelineLite();
    tl.to("#box3", 1, {rotation:-360})
    .to("#box3", 1, {opacity:0})
  return tl;


}






var masterTimeline = new TimelineLite({delay:0.5});


masterTimeline.add(firstBox())//starts at time of 0
.add(secondBox(), 0.5)//starts at 0.5 seconds
.add(thirdBox(), 1)// starts at 1 second

For more help, please consider simplifying your demo just so that we can quickly see where exactly the problems are.

 

Thanks!

  • Like 5
Link to comment
Share on other sites

Hi K_Rob and welcome to the GreenSock forums.

 

Well Carl beat me ;)

 

There are several issues with your code.

 

When you add the call to the function and not the function's public name, it gets called immediately upon code execution:

function bannerOneTimeline(){
	var banner_one = new TimelineMax();
		banner_one.add("scroll")
		.add(scrollOneBanner(), "scroll")
		.add("flip") 
		.add(flipOneBanner(), "flip")
		.add("pop")
		.add(popOneBanner(), "pop")
		.add("particle")
		.add(particleOneBanner(), "particle")
		}; 

Once this code is readed all functions are executed right away. In a timeline you should reference the functions by it's public name not call them, like this:

function bannerOneTimeline(){
	var banner_one = new TimelineMax();
		banner_one.add("scroll")
		.add(scrollOneBanner, "scroll")
		.add("flip") 
		.add(flipOneBanner, "flip")
		.add("pop")
		.add(popOneBanner, "pop")
		.add("particle")
		.add(particleOneBanner, "particle")
		}; 

Second, adding functions to timelines has no effect whatsoever in the timeline's duration. By doing that your timeline lasts zero seconds, so all the functions are executed at the same time, this will cause that every instance that could be overwritten it'll be. What you could do is put a return in each function to get the timeline and in the master timeline function store that in a variable, then add each variable to the timeline, like that you'll be adding the timelines in the proper way:

function scrollOneBanner(){
    //more variables
    var scroll_one = new TimelineMax();

    return scroll_one;
  };

function popOneBanner(){
    //more variables
    var pop_one = new TimelineMax();
    //main animation  
      
    return pop_one;
  };

function particleOneBanner(){
    //more variables  
    var particle_one = new TimelineMax();
    //main animation
  
    return particle_one;
  };

function flipOneBanner(){
    //more variables  
    var flip_one = new TimelineMax();

    return flip_one;
  };

function bannerOneTimeline()
  {
    var banner_one = new TimelineMax(),
        scrollOneBannerLine = scrollOneBanner(),
        flipOneBannerLine = flipOneBanner(),
        popOneBannerLine = popOneBanner(),
        particleOneBannerLine = particleOneBanner();
    
    banner_one
      .add("scroll")
      .add(scrollOneBannerLine,"scroll")
      .add("flip")
      .add(flipOneBannerLine,"flip")
      .add("pop")
      .add(popOneBannerLine,"pop")
      .add("particle")
      .add(particleOneBannerLine,"particle");
  }

Then all your child timelines had a repeat:-1 in the vars, I'm not completely sure of how you want this to work, but I removed it because the first timeline will repeat forever and you'll never get to the second.

 

Finally you have a lot of stuff that's not necessary, for example you're creating from instances for an element that already is in the position and opacity you're calling:

//this is the final instance of the first timeline
scroll_one.to(scroll_icon, 0.2, {x:250, autoAlpha:0})

//this is the first instance of the second timeline
flip_one.from(flip_icon, 0.8, {x:250, autoAlpha:0, ease:Bounce.easeOut});

This two instances refers to the same object and the one from the second timeline won't have any effect, because the object is already with an autoAlpha:0 and it's x value is already 250.

 

My best recommendation is to start all over again and play each timeline independently before adding it to the parent one, at least that's how I do it when I have to work with stuff like this. Also you don't need to create all those variables referring to the same DOM elements, create a set of public variables that can be used in each function, that'll also simplify reading the code and working with it as well.

 

Rodrigo.

  • Like 7
Link to comment
Share on other sites

Holy Cow!!!  

Thank you Carl and Rodrigo!  Both of your answers are awesome and really shed some light...ALOT of light on what I was not understanding.  I will step back a try again with this new understanding.

 

Thank you again for your fast and thorough responses.  I will make sure to "return" with what I come up with.

 

K_Rob

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