Reverse not triggering

[Daniel Hult]

Hi!

I have a timeline on line 112 where I morph and rotate the SVG in the top right corner. Just below the function on line 132 I have the eventlistener on the darkModeToggle for playing and reversing the timeline. Why isn't the timeline reversing back to the original state in the else statement there?

See the Pen xxZKLBV by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel.

 

The issue here is in the following code:

if (body.classList.contains('dark-mode')) {
  toggleAnimation().play();
} else {
  toggleAnimation().reverse();
}

Both times you're creating a new timeline that is attempting to go to the darkModeToggleMoon path value. The first time, it's going from the original path value to the darkModeToggleMoon value. The second time you run it, it's going from the darkModeToggleMoon value to the darkModeToggleMoon, so whether or not you play it in reverse or forward, it has nothing to animate because the start and end values are the same.

 

What you should do instead is initialize the timeline outside of any user interaction event and then control that timeline in the callbacks. I write more extensively on how to set that up in my article on animating efficiently which I highly recommend.

 

Sides note: Your eases are invalid. You should either use the condensed string form (like "power3.inOut" or the object form like Power3.easeInOut). Mixing the two doesn't work