Jump to content
Search Community

Gsap 3 Timeline start animation before last is complete

ninmorfeo test
Moderator Tag

Recommended Posts

Hi, in gsap 2 when i concatenate 2 animation and want the second start 2 second before the first one is completed i used this code:

 

.to(chi, 1, {
        x: larghezza_gioco/2,
        ease: Power4.easeIn
    }, "-=2.5")

and work nice. Now i try to convert prev code to this one:

  .to(chi, {
             duration: 1,
             x: larghezza_gioco / 2,
             ease: Power4.easeIn
         }, "-=2.5")

but something strange happen. As you can see from codepen exemple, 

last timeline animation does not let the previous animation end and the last 2 square dont go to the center. Which didn't happen in gsap 2 even if the animations overlapped.

See the Pen MWYKrEK by Ninmorfeo (@Ninmorfeo) on CodePen

Link to comment
Share on other sites

Hey ninmorfeo. This is because you have tweens that are conflicting with each other. 

 

Think of staggers as creating a bunch of tweens automatically for you. Most of the tweens complete before your second actual tween (the one that moves all your squares to the same place) finished. But the last two boxes start after the second tween finishes. So according to the global timeline it looks like:

 

- Run the staggered boxes animation

   - Run the "merge" animation

- Run the last couple boxes animation

 

What are you hoping for it to do instead? 

Link to comment
Share on other sites

yes, but with 1.8 value the last animation starts when the penultimate animation is finished, while I would like it to start first. In the middle of the penultimate stagger for example. It must be said, however, that in gsap 2 this 'problem' did not exist.

Link to comment
Share on other sites

can I solve if I use 2 separate timeline?
like this 

function intro() {
	var tl = gsap.timeline();
	//...add animations here...
	return tl;
}

function middle() {
	var tl = gsap.timeline();
	//...add animations here...
	return tl;
}



// stitch them together in a master timeline...
var master = gsap.timeline();
master.add(intro())
      .add(conclusion(), "-=2")     //overlap 2 seconds
      

or is the same result ?

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Try it and see :) I think it'd be the same. 

 

I still don't see what the issue is - just set the offset to what you need it to be.

Sorry but I noticed another oddity. I added the parameter boxShadow in the last animation but in the transition between the first and the last animation the shadow is lost for a moment ... this I'm sure in gsap 2 it didn't happen to me: D

 

.to(chi, {
             duration: 1,
             x: larghezza_gioco / 2,
            boxShadow: function (index) {
                      let ombra = '' - (5 + ((index + 1) * 10)) + 'px ' + (3 - ((index) * 3)) + 'px ' + (-4 + ((index + 1) * 10)) + 'px ' + (3 - ((index + 1) * 5)) + 'px rgba(0,0,0,' + (0.8 - ((index) * 0.1)) + ')';
                     
                        return ombra
                    },
             ease: Power4.easeIn
         }, "-=1.8")

Here is the link to codepen:

 

Link to comment
Share on other sites

Chrome returns the computed box shadow style with color first, so it needs to be in that format.

boxShadow: "rgba(0,0,255,0.8) 8px 8px 8px"

 

See the Pen 94d4b78c7bbe8960b2a76206ce1abb6b by osublake (@osublake) on CodePen

 

To work across all browsers, you should animate an plain old JavaScript object with the box shadow values you want, and then in onUpdate callback, apply the new box shadow value.

 

See the Pen 7c70ddf8a08dac50da43702e92e66eed by osublake (@osublake) on CodePen

 

 

  • Like 3
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...