Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate flag smooth

Recommended Posts

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

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





  • Like 4
Link to comment
Share on other sites

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

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.