I'm trying to achieve a fun SVG animation effect. On a website I saw, there's a straight horizontal line that wiggles when clicked. The SVG code involved includes two SVG elements: one for the squiggly effect and one for the straight line. I'm having trouble finding any pre-made solutions that allow for toggling the animation, and I need some guidance on how to implement this. Here's the SVG code I'm working with:
```html
<svg xmlns="http://www.w3.org/2000/svg" id="squiggle-link" width="24" height="24" viewBox="0 0 20 4" class="squiggle"><path fill="none" stroke="#ffffff" stroke-width="2" d="M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3"></path></svg>
```
```html
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="line"><path d="M23 13H1C0.4 13 0 12.6 0 12C0 11.4 0.4 11 1 11H23C23.6 11 24 11.4 24 12C24 12.6 23.6 13 23 13Z"></path></svg>
```
I've also toyed with other SVGs but can't seem to toggle the animation between the two shapes. Any suggestions?
3 Answers
Check out my CodePen from last week; it showcases exactly what you're trying to do! You can find it [here](https://codepen.io/tomhermans/pen/XJdyJYQ). It might help you understand how to implement the toggling. You could also consider toggling classes on a mouse click for different effects, that could simplify things!
So, to rotate the animation, you actually just need to change the `d` attribute of the path in JavaScript. CSS can't animate SVG `d` attributes well, unfortunately. Here's a simple way to toggle:
```javascript
const path = document.querySelector('path');
const straight = 'M0,12 L24,12';
const wiggle = 'M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3';
path.addEventListener('click', () => {
path.setAttribute('d', path.getAttribute('d') === straight ? wiggle : straight);
});
```
Just remember to add a CSS transition to the path for smoother effects, although support can vary between browsers! If you want to avoid issues, GSAP's MorphSVG plugin is a solid choice and takes care of any extra complications.
Isn't GSAP free now? I thought it was open source!
Thanks for the tip! I didn't realize it was called "path morphing." I'm currently integrating MotionJS and came across a great path morphing example [here](https://motion.dev/examples/js-svg-path-morphing?platform=js). Trying to tweak it for my needs, but I'm getting a few odd results.
You might want to check out libraries like GSAP or anime.js, which have features for SVG morphing. Just remember that for anime.js to work, your SVGs need to have the same number of path segments! It's pretty handy if you want a smoother animation overall.
I'll try that, thanks! Sounds like a good plan.