ninmorfeo Posted December 9, 2019 Share Posted December 9, 2019 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 More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 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 More sharing options...
ninmorfeo Posted December 9, 2019 Author Share Posted December 9, 2019 I would like the last animation to start before the penultimate one is completed, for a more choreographic movement. More or less the way it is now but with all the squares going to the center. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 A smaller offset like "-=1.8" instead of "-=2.5" does that. Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 9, 2019 Author Share Posted December 9, 2019 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 More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 7 minutes ago, ninmorfeo said: I would like it to start first So make the value smaller, like "-=1.3". 8 minutes ago, ninmorfeo said: in gsap 2 this 'problem' did not exist. It worked the same way as it does now: See the Pen RwNrMgK?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 9, 2019 Author Share Posted December 9, 2019 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 More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 4 minutes ago, ninmorfeo said: can I solve if I use 2 separate timeline? or is the same result? 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. 1 Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 9, 2019 Author Share Posted December 9, 2019 ok thanks you right Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 9, 2019 Author Share Posted December 9, 2019 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 More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 @GreenSock Any idea why the box shadow doesn't want to animate here? Link to comment Share on other sites More sharing options...
OSUblake Posted December 9, 2019 Share Posted December 9, 2019 28 minutes ago, ZachSaucier said: Any idea why the box shadow doesn't want to animate here? I can think of many. 1 Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 9, 2019 Author Share Posted December 9, 2019 8 hours ago, OSUblake said: I can think of many If you replace Shadow function with static value the behaviour Is the same... Link to comment Share on other sites More sharing options...
OSUblake Posted December 9, 2019 Share Posted December 9, 2019 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 9, 2019 Share Posted December 9, 2019 1 hour ago, OSUblake said: Chrome returns the computed box shadow style with color first, so it needs to be in that format. Good call. 1 Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 10, 2019 Author Share Posted December 10, 2019 work fine now thanks Link to comment Share on other sites More sharing options...
GreenSock Posted December 11, 2019 Share Posted December 11, 2019 On 12/9/2019 at 4:32 PM, OSUblake said: Chrome returns the computed box shadow style with color first, so it needs to be in that format. I made some improvements to the next release that should sense this condition and adjust for it. Preview it here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js 2 Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 Using the updated version. See the Pen 97c87a4f788d75b405a90b9f308afbf4 by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
ninmorfeo Posted December 11, 2019 Author Share Posted December 11, 2019 you are great !!! thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now