How do I create this morphing mask animation with GSAP?

[animationmagic 5 Likes (Newbie)]

Hi there!

I'm trying to create this kind of animation, a morphing mask over an image:

https://www.nikki-kay.com/

It seems like this is a lottie animation.

What way would you suggest, if I wanted to recreate this with GSAP? A morphing mask, or a clip path?

Ideally I want to add more animation layers around it, so not sure if a lottie animation would be best.

Thanks so much for your help!

Lisa

See the Pen oNGVXdL by lisaschumann (@lisaschumann) on CodePen

[OSUblake 18,367 Likes (Superhero)]

Hi @animationmagic

 

The way you are trying to do it right now won't work because you have two different types of paths, one using SVG path data and the other using percentages, so GSAP won't be able to animate between the two.

 

However, if you use an SVG for the clip path, you can use the MorphSVGPlugin which can solve all those issues.

 

 

[animationmagic 5 Likes (Newbie)]

Thanks for your reply @OSUblake - I thought about that but they you could only move between those two states, right? Is there a way to create a random clip-path?

[OSUblake 18,367 Likes (Superhero)]

You can have as many states as you want with a timeline, kind of like this.

 

tl.to(".foo", { morphSVG: "#shape1" })
  .to(".foo", { morphSVG: "#shape2" })
  .to(".foo", { morphSVG: "#shape3" })
  .to(".foo", { morphSVG: "#shape4" })

 

For pure randomness, you would have to animate individual points in the path data. 

 

See the Pen vdzjyg by osublake (@osublake) on CodePen

 

[animationmagic 5 Likes (Newbie)]

@OSUblake Thanks so much, this worked like a charm. Really appreciate your help!