Jump to content
GreenSock

b0b3k

Problem with nested timelines

Go to solution Solved by Rodrigo,

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,

 

 

It's my first project that uses GSAP. Here you find it http://www.wremo.pl/testCase....test.html - it dont have images right now, but the main issue is how to nest it in right way? i would like to have two main timelines for this two ad's with correct function of onComplete, now it returns complete after first scene (about 2-3 seconds after start)

 

How can I make it to have two main timelines with full duration for both ?

Link to comment
Share on other sites

look at the code at my url

 

"        var mainTL = new TimelineMax({onComplete:restart}).add(f_728_90_ad, 0);
        var secondTL = new TimelineMax({onComplete:restart}).add(f_160x600_ad, 3.3);        
        console.log(mainTL);
        console.log(secondTL);
"

 

this onComplete method start just after start immediatly, i want to start it at the end of added nested timelines, is this more clear now? :)

 

at a final effect I want to run this two times only for all and catch the second repeat to parameter (at second repeat I need finish one timeline before)

 

 

ps. i've uploaded images - you can reload page now

Link to comment
Share on other sites

hmm , if i understood correctly you should to add as function ( with"()" ) to return your timeline , like this :

 

.add(  f_728_90_ad() , 0 );

.add( f_160x600_ad() , 3.3);  

Link to comment
Share on other sites

its a function already ;) var bla = function() {} return typeOf(bla) - function, so its not a problem.

 

I have

var mainTL = new TimelineMax({onComplete:restart}).add(f_728_90_ad, 0);

 

and it's ok but onComplete return console.log just after start, understand? it's not working properly, I want to know how can I make to call onComplete after whole nested timelines (its about 15 seconds for 728x90px banner)

Link to comment
Share on other sites

this's correct : 

 

.add(  f_728_90_ad() , 0 );
.add( f_160x600_ad() , 3.3);  

 

See the Pen PqgERp by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Refresh, I think it's not, got

 

uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.
 
 
and it fires too early as before
Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.

 

The point is that the function is returning itself and not the timeline, therefore at that point the timeline is empty.

 

The best approach is using a function that returns the timeline being created:

function createLine(){

  var nestedTimeline = new TimelineLite();

  nestedTimeline
    .to(el, 1, {vars});

  return nestedTimeline;

}

var parentTimeline = new TimelineLite();

parentTimeline
  .add(createLine());
  • Like 3
Link to comment
Share on other sites

Got this !!:) thanks for help, issue was to create function by your method, but why not by this ? var function = function() { .... return timeline; }

 

? can you explain ?

Link to comment
Share on other sites

It's a very used capability of javascript. Basically and in simple language the return statement at the end of a function replaces the function expression. Take this for example:

var tl = new TimelineLite();

TimelineLite() is a constructor and as such has a lot of code inside, but at the end has a return statement that allows you to store that new instance of the constructor in the tl variable so you can apply methods to it and reference it.

 

In your case basically the difference between adding the reference to the function and calling the function is that the reference will cause the function to be executed while calling the function will replace that with the timeline created by the function.

 

You can check this links to learn more about the return statement:

 

http://www.w3schools.com/jsref/jsref_return.asp

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return

 

Happy Tweening!!

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