Jump to content
Search Community

Image mask query

Sean_has_started_coding test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello all, hope everyone is doing well.

 

I am trying to create a mask of an image which when animated increases the size and changes the position of the mask.

It works well in Chrome but not in Safari. I'm afraid it does not work in the code pen link above but it does work in Chrome (I hope it helps to illustrate my problem). In Safari, the mask is not behaving as it does in Chrome, with an exaggerated movement.
I have a text box animating at the same time as the animated mask.

The mask first reveals only the woman in the left but then it increases in size and position to include the other two people in the image.

This is part of a longer animation and my client wants to create a number of animations in this manner, with different images and captions.

I have tried adding a height and width to the clipPath holding the mask but not joy. Been playing about with this for a good few hours and have attempted to find a solution on google (as well as in the forum naturally...). But no success.
Any advice would be greatly appreciated as ever.
Thanks all.

See the Pen ExdLMQb by HappyGooner (@HappyGooner) on CodePen

Link to comment
Share on other sites

Hey Craig, thanks for getting back to me so quickly.

I am still having the same issue, with the mask behaving different in Safari when compared to Chrome (it works perfectly in the latter).
The code looks clean to me but if you can point me towards the parts which can cause an issue, that would be greatly appreciate.

 

Updated pen:

 

Thanks as ever.

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