rala Posted November 19, 2021 Share Posted November 19, 2021 Hi, I'm trying to animate flag but when add the animation the top part of flag cut and the animation not smooth . See the Pen jOLJqga by roleno (@roleno) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 19, 2021 Share Posted November 19, 2021 Hey there @rala Key to this visual trickery is to first get the SVG prepared correctly, meaning creating a pattern that seamlessly repeats horizontally and stays withing the bounds of one plain axis (don't know how else to say that, hope it still makes sense) - yours is off on the vertical axis, it sort of moves up diagonally, that's why when you animate it on the x-axis horizontally, it will get cut off by the clip-path. Here's a visualization of what I mean by the above To make it animate smoothly you will need to set an ease of none on your tween (which I would preferably choose an xPercent for actually). Hope this helps a bit. Happy tweening See the Pen 269fb9e218ef1f1f35b36d3b2c0506d0 by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
Trapti Posted November 19, 2021 Share Posted November 19, 2021 Your SVG was not optimised. @akapowl optimised it in his pen. In future you can use SVGMO for this. 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