Elastic SVG Morph on Click and Swipe

[SkyFall]

Hi there!
I've just discovered this tutorial and want to create something similar for my website.
I've never used GSAP so far, so my question is, if I can modify this code, so that the animation does start on a click trigger instead of page load. The element also needs to be swipeable, so I guess I am going to need GSAP Draggable and/or the Intertia Plugin additionally? Which GSAP Products do I need to achieve this? Thanks in advance! :)

See the Pen KLXdGL by designcourse (@designcourse) on CodePen

[nico fonseca]

Hey @SkyFall, welcome to the forum ! 💚

 

I updated your code so that the animation works with the button, and I updated with the new GSAP version 🙌

If you need to pause the animation you can use the paused:true property in your tween.

See the Pen eYejgJp by nicofonseca (@nicofonseca) on CodePen

And yes if you need to change something with drag you can use Draggable + Inertia Plugin and change the timeline progress for example 🙂

[SkyFall]

Nice work, thanks a lot! 🙂
I'm trying to make the last path occupying the whole screen but it is not working. I've removed the initial width of the SVG and added width: 100vw and height: 100vh  into the tl.to, here is my attempt:

See the Pen qBVyyRm by SkyFall1337 (@SkyFall1337) on CodePen

Do I need to modify the viewbox of the svg or where is my mistake?

[OSUblake]

Hi SkyFall,

 

You can't set the width or height of a path. To fill the entire <svg> element, you would need to use preserveAspectRatio="none" on the <svg> element, and then modify those paths in a SVG editor to fill the entire viewBox.