Jump to content
Search Community

Mask size not working for webkit browsers

CindyDB test
Moderator Tag

Recommended Posts

.to(".masky" , {duration: 100000,delay:5000, maskSize: '100%',webkitMaskSize: '100%',autoAlpha: 1, ease: "power3",maskPosition: 'center'})

As you see above I've got a mask that's zooming in in size. It's working perfectly fine in Firefox but not in Chrome/Safari. I've tried webkitMaskSize and WebkitMaskSize, neither seems to work. 

 

I know my delay/durations are messy, but that's a next step to figure out.

 

Thanks

Link to comment
Share on other sites

 

Hey @CindyDB

 

You can see that webkitMaskSize actually does work, in this example here when you hover the circle ( not that it is the best example usecase - it's just to show that it works ). Well, it should work - I am on chrome and it works for me.

 

See the Pen 9a0ed6e6e096c0fa9e606839632f72be by akapowl (@akapowl) on CodePen

 

 

 

The reason you might not see anything, might be, that your durations really are a bit long. 

In GSAP, durations are not measured in milli-seconds, as you might think, but in seconds.

 

You actually put a duration of 100,000 seconds on the tween - which is a pretty long time - so even if you waited the 5,000 seconds before it started, you would probably not be noticing that much being tweened around.

 

On 11/16/2020 at 12:08 PM, CindyDB said:

I know my delay/durations are messy, but that's a next step to figure out.

 

So maybe yes, this could be why actually nothing is showing for you.

 

Hope this helps. Welcome to the forums :) 

 

  • Like 3
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...