Jump to content
Search Community

Animate flag smooth

rala test
Moderator Tag

Recommended Posts

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

flag.png.bc5d77e79e2e65a3586d2f7cdd19486f.png

 

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

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