Jump to content
Search Community

Two equal tweens not exactly the same.

j1pster test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all,

 

First of all, thanks for the amazing animation platform and community. Most of the questions I've had so far I've been able to answer just by searching on this forum. Right now, I've not been able to find an answer.

 

I'm trying to use a rounded div as a mask, so it masks the overflow of every div inside it. I figured I could just use two tweens everytime (or rather, an onStart function that I could call), one to animate the scale of the circular div, and an equal and opposite one to scale the content the other way around, so it would just appear that the circle is growing/shrinking. 

The problem I'm having, is that the animations don't exactly line up. The content appears to scale a little bit before catching up. I've tried it with both tweens and timelines, using eases, no eases, and Linear.easeNone. 

 

I've created a small example on codepen: 

See the Pen aBKqWB%C2%A0 by J1pster (@J1pster) on CodePen

 

Does anybody know a way to do this so the content inside the circle does not appear to scale? I'm open to other solutions, like using SVG, but we've had problems with this in the past so we've been avoiding it for now. 

 

Kind regards,

 

Jip

 

 

Link to comment
Share on other sites

Hi j1pster,

 

Because you are scaling the parent down, the children are affected and thus, their scaling parent/child will not match. I can't really explain why without a lot of words but hopefully you will take my word when I say that scaling something to 0.9 and then 0.8 is a very different ratio than scaling something to 1.1 and then 1.2 and so on.

 

SVG masking will give you the better coverage when it comes to masking, never will be 100% but if I were to mask something I would use an SVG. Clip-path is also ok these days.

 

What sort of problems did yo have in the past?

 

Here's a with some examples to get you started:

 

See the Pen myNNyW by dubrod (@dubrod) on CodePen

Link to comment
Share on other sites

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...