Custom animations are applied to svg elements by morphing their <path> data.
GSAP's MorphSVG plugin is used with Tween or Timeline to animate svg elements' <path>. Animation can be triggered by user interaction like hover or when completely visible using Intersection Observer.
Editable Title
This animation occurs only on hover.
Scroll Down
Editable Title
This animation occurs only when the entire svg is visible.