Is there a way to call an animation complete on your own?

[Damian Hutter]

Hi there,

 

Currently I'm playing around with framer-motion and GSAP. I really love GSAP, however, framer-motion has some need tricks like spring animations, page transitions and works just so well with react. So in a perfect world I would be able to combine the power of both to control great spring animations with GSAPs powerful timeline and morphing capabilities.

But, in order to do so I would need to tell framer motion when to start an animation. Easy - just using framer-motions start() function within GSAPs onStart() callback. However, the issue is, that GSAP calls an animation 'complete' way before it's really done. Which makes total sense as GSAP is not controlling the animation but messes up the timeline.

Therefore my question is - can I call an animation 'complete' on my own? As framer has the option to call a function onEnd().

Thanks in advance! Here's a little codesandbox outlining the overall idea...

https://codesandbox.io/s/suspicious-swanson-54075?file=/src/App.js

[nico fonseca]

Hey @Damian Hutter If you don't set a duration value GSAP will set it as '1' by default, that's because the onComplete function run before the framer-motion finishes, so you need to set the same duration as framer-motion.

 

[nico fonseca]

Something like this, does it help? 🙂
 

  React.useEffect(() => {
    const duration = 2;
    tl.to(refApp.current, {
      duration,
      onStart: () => {
        console.log(controlCardWrapper);
        controlCardWrapper.start({
          rotate: 100,
          transition: { type: "spring", mass: duration }
        });
      },
      onComplete: () => console.log("I am ready!")
    });
  }, []);

 

[Damian Hutter]

Hi @nicofonseca - Thanks a lot for your response!

 

Yea, I thought about something similar but it has one major flaw - A spring animation doesn't have a duration. The animation is based on physics and therefore calculated on the fly. That being said, it would be an option to time the animation and provide the duration to GSAP. But it feels very 'hacky'.

That's why I thought there might be a possibility to tell GSAP on your own when the animation should be completed. Basically an await function or something like that.

Anyway - good thinking 🎉

[nico fonseca]

Ohh, I understand! 
And if you create your GSAP timeline and control your progress on the framer-motion update? So i think when the framer-motion animation finish the GSAP animation will as well.
 

[OSUblake]

6 hours ago, Damian Hutter said:

That's why I thought there might be a possibility to tell GSAP on your own when the animation should be completed. Basically an await function or something like that.

 

I don't think I totally understanding what you mean. Can you explain this more? GSAP animations can be awaited, and you can do stuff like adding pauses or forcing animations to complete, but it's not clear from your code what you want.

 

[GreenSock]

8 hours ago, nicofonseca said:

If you don't set a duration value GSAP will set it as '1' by default

It's actually 0.5 seconds by default.

 

8 hours ago, Damian Hutter said:

can I call an animation 'complete' on my own?

Like @OSUblake I'm kinda lost here - let's say, for example, that you've got a gsap.to() animation with a duration of 2 seconds. Are you saying that you've also got a framer-motion animation going simultaneously that uses a physics-based spring ease so you don't actually have any idea when it will end...but let's just say that it'll end after 3.4 seconds....you want to force the gsap.to() animation to make its 2-second animation actually take 3.4 seconds instead? Or are you saying that if the framer-motion one happens to end FIRST, you want a way to force the GSAP one to jump to its completion state and call any onComplete (if defined)? 

 

If you could elaborate a bit, I'm sure that'd help us offer some suggestions. 

 

One of the major down sides of using physics-based animations is that it's almost impossible to control timing well. Imagine trying to do complex choreography or even doing simple things like "start this animation 0.5 seconds before the end of that other one" - pretty much impossible with a system like that. 

[Damian Hutter]

Hi @GreenSock, @OSUblake, @nicofonseca

First of all - thanks a lot for all the ideas and insides so far. That really helped a lot. I got back to my code and tried to come up with a cleaner version which might showcase some aspects of my explorations. Within the codesandbox (https://codesandbox.io/s/suspicious-swanson-54075?file=/src/App.js) you can now see 3 boxes falling from the sky and bouncing back up on the ground. I've put a description of each box within the code and hopefully this underlines the idea behind everything.

Thanks to @nicofonseca I was actually able to get the timeline to work by pausing and resuming the timeline from the framer onCompleteAnimation function. However, I need to specify at least a default duration of 0.1 for the overall timeline as a 0 is not working. That's where my initial idea comes into play if there would a way to tell the GSAP timeline - hey please await this function before moving on. Without the need to manually stop and resume the timeline itself.

@GreenSock You're right in terms of the difficult implementation when it comes to timing. However, framer-motion and others have the option to define a restSpeed or restDelta to tell the next animation to start. Which feels pretty natural. In my experiment I was just looking for the possibility to combine these animations with GreenSocks MorphSVGplugin which is just unmatched by anyone else. Also the ScrollTrigger is so much better than the one which framer-motion offers.

Thanks again so far - I've learned a lot already! 🎉

[OSUblake]

Hi @Damian Hutter

 

Did you check out the addPause method?

https://greensock.com/docs/v3/GSAP/Timeline/addPause()

 

Weird stuff happens when pauses and callbacks happen at the exact same time, so you can add just a little time gap in between them.

https://codesandbox.io/s/dark-wind-k5uec?file=/src/App.js