Share Posted May 11 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 More sharing options...
Share Posted May 11 The clip-path isn't working in your demo because it isn't applied to the group holding the image. Line 9 of the HTML needs to be: <g clip-path="url(#mask)"> Happy tweening. 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 11 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: See the Pen ExdLMQb by HappyGooner (@HappyGooner) on CodePen Thanks as ever. Link to comment Share on other sites More sharing options...
Solution Solution Share Posted May 11 You'll need to target the rectangle in the clip-path rather than the clip-path itself. This seems to work correctly in Safari for me. See the Pen vYVrYeV by PointC (@PointC) on CodePen Happy tweening. 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 11 Great stuff, thanks as ever Craig. Will work on this in the morning. Have a good evening and thanks again for your time. 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