menu

Framer

The best prototyping tool for teams. Join our Discord chat for weekly classes and real-time help with Framer. http://framer.com/r/discord?utm=spectrum

Channels
Team

[framer-motion] How to "pause" an animation on a loop

April 6, 2020 at 5:44pm

[framer-motion] How to "pause" an animation on a loop

April 6, 2020 at 5:44pm
Let's say I have a box that moves from the left side of the screen to the right side. It loops infinitely.
How would I stop the box mid animation on hover and the have it continue when unhovered?

April 7, 2020 at 4:23pm
You need to make the animation using animation controls, and set the event to stop or start the animation on hover: https://www.framer.com/api/motion/animation/#animation-controls
  • reply
  • like

April 8, 2020 at 2:47pm
this unfortunately does not work. I've tried it out.
  • reply
  • like
What happens is on hover the box stops, but when it starts again it has the same duration as before. So, as you hover on/off, the box gets slower and slower, not the same speed as before
  • reply
  • like

October 15, 2020 at 4:44am
(mildrenben) Did you ever figure this out? I am trying to answer the same problem.
  • reply
  • like