Mask size animation and transform origin problem

[laplage]

Hi,

 

I'm working on an animation, using maskSize and maskPosition that are causing me some problems.

The maskPosition doesn't seem to be animated proportionally to the timeline.

Can you point a problem in my CSS or JS ?

 

Thanks a lot for your help.

 

Nicolas

 

See the Pen xxBmVgx by stereoweb (@stereoweb) on CodePen

[mvaneijgen]

I've minimalised your demo a bit so that we can focus on the relevant parts to see what is happening. This is the tween that has the issues right? I'm also not clear what the animation should do right now and what it is doing instead. 

 

See the Pen YzgdGqg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've never worked with mask-image before. I've written the following guide how certain masks work with GSAP, so maybe if I understand this one I can add it to the guide.

 

When animating complex strings in GSAP you have to make sure that both strings are the same (only have different values), so animating from "60% 60%" to "center 32%", can't really work, because how would GSAP know how to convert center to 60%. This is the same logic as in my guide animating the clipPath.

 

 

I do know that browsers don't really like calling to insane values like 1400% and you're better of setting the final size to the image and then animating .from() some value like 1% to the default value of 100%.

 

To me you're just animating some logo to a bigger scale, and I'm wondering if you need mask-image at all. And instead just load a transparent SVG directly in the browser and scale that using the transform scale property.

 

I hope these point already guide you in the right direction otherwise let us know what else we're missing here. Happy tweening!

 

 

[laplage]

Hi @mvaneijgen

 

thanks for your message.

 

I'm trying to make the Logo zoom through the revealing the wood texture underneath.

Like if the camera was zooming-in and through the Logo.

For that the "camera" has to go through the mask.

I'm targetting this point in the mask

https://share.cleanshot.com/cPNLS4GRL0r8zYhl7NPS

 

The size factor doesn't seem to be a problem, the mask is growing correctly.

The animation is first scaling with a transform-origin too low, and then recalibrating to the right one, and I don't understand why.

The equation used doesn't seem to be the same, the question is why,  or how can I control it ?

 

About the idea to use an  inverted SVG Logo, I would have to have a huge one, with an external white space, and an internal logo, that would still have to grow.

 

The mask seemed a better idea.

 

Nicolas

 

 

[Rodrigo]

Hi,

 

Maybe just create a second instance for the mask position property with a different duration and easing (FYI the demo has a click handler to restart the animation):

See the Pen qBvLXYg by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[laplage]

@Rodrigo

It works so well, thanks a lot for your help.

Never would have thought to separate the animations, so neat

 

Nicolas