Jump to content
Search Community

Appending Tween in the middle of existing timeline

qarlo test
Moderator Tag

Go to solution Solved by Carl,

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

Hello,

I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline.

 

The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100.

 

For the basic behaviour, fading in and out, I have this:

 

$.each($('.slide'), function(i) {
      tl.add([
        TweenMax.to($('.slide-' + (i+1)), 1, {
          opacity: 0,
          immediateRender: false
        }),
        TweenMax.to($('.slide-' + (i+2)), 1, {
          opacity: 1,
          immediateRender: false
        })
      ], '+=1');
tl.add('slide' + (i+1));
    });
  });

Notice that I'm also adding a label after each step.

At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3.

I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this:

 

  tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');

What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter.

Am I again missing something about the position or my approach is totally wrong?

 

See the Pen LRjarR?editors=0111 by qarlo (@qarlo) on CodePen

Link to comment
Share on other sites

  • Solution

it seems you were just adding your slide4 tween outside the onload handler, which means you were adding it BEFORE the each() ran that built the timeline.

 

move the }) as shown here: http://prntscr.com/co7fox

 

good?

 

something to keep in mind you can get an array of the labels using tl.getLabelsArray() before finding that your code was in the wrong place I tried getting the labels array right before the add() of slide4 like:

 

console.log(tl.getLabelsArray());
  tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');
 
and found that there were no labels.
  • Like 1
Link to comment
Share on other sites

also, I noticed you are a fan of using TweenMax.to() inside of add() is there a reason why you don't use the to() method of TimelineMax?

It can make your code much shorter to type and easier to read.

 

so instead of using add() with an Array of TweenMax tweens, you can do:

 

var position = tl.duration();
      tl.to($('.slide-' + (i+1)), 1, {
          opacity: 0,
          immediateRender: false
        }, position)
       .to($('.slide-' + (i+2)), 1, {
          opacity: 1,
          immediateRender: false
        }, position)

or instead of

tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');

just use

tl.to('.slide-4', 1, {opacity: .5}, 'slide2+=1');

What you are doing is ok and will work, but I think you will find .to() to be much easier on you;)

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/to/

  • Like 2
Link to comment
Share on other sites

 

it seems you were just adding your slide4 tween outside the onload handler, which means you were adding it BEFORE the each() ran that built the timeline.

 

move the }) as shown here: http://prntscr.com/co7fox

 

good?

 

something to keep in mind you can get an array of the labels using tl.getLabelsArray() before finding that your code was in the wrong place I tried getting the labels array right before the add() of slide4 like:

 

console.log(tl.getLabelsArray());
  tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');
 
and found that there were no labels.

 

 

This was really stupid, sorry, I should've found by myself. Sometimes I get confused in the small codepen editor and I messed up the parenthesis.

Anyway, thanks for the great tip about getLabelsArray(). I didn't know the function and it will be very useful for debugging.

 

also, I noticed you are a fan of using TweenMax.to() inside of add() is there a reason why you don't use the to() method of TimelineMax?

It can make your code much shorter to type and easier to read.

 

so instead of using add() with an Array of TweenMax tweens, you can do:

 

var position = tl.duration();
      tl.to($('.slide-' + (i+1)), 1, {
          opacity: 0,
          immediateRender: false
        }, position)
       .to($('.slide-' + (i+2)), 1, {
          opacity: 1,
          immediateRender: false
        }, position)

or instead of

tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');

just use

tl.to('.slide-4', 1, {opacity: .5}, 'slide2+=1');

What you are doing is ok and will work, but I think you will find .to() to be much easier on you;)

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/to/

 

It's true, but I think I started using add() when I needed to group Tweens and I still didn't know or understand how labels work. I guess this way, and inserting proper labels the code will be cleaner and easier to debug

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