Bug report: spring-based motion not completing (Vanilla JS, HTML, CSS)

[Cerchie]

I've been building a demo of spring-based animation using animejs. You should be able to put the params (mass, stiffness, damping, velocity) into a form and watch what happens when you change the params and hit 'start' again.

I'm able to put in the initial params and get the animation to fire and see a result. I'm also able to see a result the second time. By the third time, my target doesn't move.

My guess is that this is due to the animation not completing. When I console.log the instance, I can see that changeComplete is null and changeCompleted is false:

To reproduce, git clone https://github.com/Cerchie/vanilla-spring.git and open with Chrome in Live Server.

Then, open the dev tools so you can see the console logged value.

Next, scroll to the form:

and try pressing 'start' a few times after entering different values. You'll see the uncompleted anime instances show up in the devtools.

Desktop

• OS: Apple M2 Pro Ventura 13.3
• Browser: Chrome Version 119.0.6045.159 (Official Build) (arm64)
• Version: Animejs V3

[juliangarnier]

Hi, just tried your example and I got

index.js:22 Uncaught ReferenceError: anime is not defined
    at startMotion (index.js:22:9)

when I clicked on the the Start button

[Cerchie]

oh my apologies, I missed writing a step in the instructions: try npm install then click the button

[juliangarnier]

OK I also had to change the path to the lib to "./node_modules/animejs/lib/anime.min.js" (the . at the beginning was missing). Regarding your issue, you start animating from 0 to 200, but if you call this animation when '.thingy' is at 200px, the animation will be from 200 to 200, so nothing will happen visually.

You can force the animation to starts at 0 every time by using an array of values like this:

motionInstance =  anime({
  targets: '.thingy',
  translateX: [0, 200], // from 0 to 200
  direction: 'alternate',
  autoplay: true,
  loop: 2,
  easing: `spring(${mass}, ${stiffness}, ${damping}, ${velocity})`
})

[Cerchie]

oh I should have realized that!

thanks so much for explaining.