CindyDB Posted November 16, 2020 Share Posted November 16, 2020 .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 More sharing options...
akapowl Posted November 16, 2020 Share Posted November 16, 2020 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now