Jump to content
Search Community

Easy Repeat/Loop Question

celli 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

Hi Celli,

 

The issue is that your tlfactory timeline is too long, more than 2 minutes long. A good practice, at least IMHO, is that when you're working with nested timelines, is to check their duration and add some console.log() call on the onComplete callback to check how and when everything is happening. Also, at least in your codepen, there was an reference error regarding what you were adding to the master timeline. In your codepen you have this:

// the last two elements returned as undefined
masterTimeline
  .add(tlfactory)
  .add(unmanufacturedtextIN)
  .add(unmanufacturedtextOUT);

// change it to this
masterTimeline
  .add(tlfactory)
  .add(tlunmanufacturedtextIN)
  .add(tlunmanufacturedtextOUT);

I basically added a .call() instance with a console log in it to the master timeline and it took forever to appear in the console, then I added this to check the duration of each nested timeline:

console.log( tlfactory.duration(), '***', tlunmanufacturedtextIN.duration(), '***',tlunmanufacturedtextOUT.duration() );

// Return => 132.74000000000007 "***" 1.11 "***" 1.11

That's basically 2 minutes 12 seconds for the first nested timeline. On of the reasons is the delay you're adding in the staggerTo() method. The bad news is that without that delay the timeline still has a duration of more than 49 seconds. The reason for that is this line in the each loop:

.staggerTo(factoryShapes, 0.9, {css:{autoAlpha:0, transformOrigin:"center center"}, delay:2.6}, 0.02);

The problem here is that you're staggering every element in the collection on each pass of the loop, therefore the timeline gets over 4 seconds longer after every loop.

 

One solution is to create a factoryIn and factoryOut timeline and add those before the text animations and add those to the master timeline with the delay you need between them, like this:

//factory
var factoryShapes = $('.factory g'),
    tlfactoryIn = new TimelineMax({delay:1.5}),
    tlfactoryOut = new TimelineMax({delay:1.5});

//loop through each shape and create a tween with random values for each
factoryShapes.each(function(index, element){
  tlfactoryIn
    .from(element, 0.9, {autoAlpha:0, transformOrigin:"bottom center",
    y: randomNumber(100, -40) ,ease: Back.easeOut}, index * 0.015);
  tlfactoryOut
    .to(element, 0.9, {autoAlpha:0, transformOrigin:"center center"},index * 0.02);
});

masterTimeline
  .add(tlfactoryIn)
  .add(tlfactoryOut)
  .add(tlunmanufacturedtextIN)
  .add(tlunmanufacturedtextOUT);

Sorry, I forgot to add the codepen link:

 

See the Pen NqooZG by rhernando (@rhernando) on CodePen

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