Jump to content
Search Community

How do I create this morphing mask animation with GSAP?

animationmagic test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

  • Solution

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

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...