Jump to content
GreenSock

johnm01

seemless rotation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey, 

 

Having a bit of an issue rotating an svg so it looks seemless.

It rotates 360 degress then kinda flickers as it starts again.

Any ideas?

 

See the Pen ePxVPJ by johnmaddock (@johnmaddock) on CodePen

Link to comment
Share on other sites

In keep flying you were using absolute value so wrapper would only animate from 25 to 360. You need to use relative value instead "+=360"

 

See the Pen Pxqqax?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 7
Link to comment
Share on other sites

Hi Sahil, thank you very much for your reply... How does the rotation in start flying affect the one in keepflying, I thought the fact they were two separate timelines would mean keepflying would start where start flying finishes?

Link to comment
Share on other sites

Yes that's what is happening but when you define a 'to' tween, GSAP will start from current value and animate it to the value you specified. If you had first timeline animating to 180 then keepFlying will just go from 180 to 360 and keep repeating just half circle. If you had first timeline to 360, nothing would happen in keep flying because the fly is already at the end position. That's why you need to use relative value, so now in your case first timeline goes to 25 and keep flying goes from 25 to 385 and keeps repeating.

 

We have great resources on learning page that explain all these finer details, you will find it a lot useful in future: https://greensock.com/learning

  • Like 5
Link to comment
Share on other sites

thanks again Sahil....appreciate the help

  • Like 1
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.
×