Jump to content
Search Community

Seamless Rotation

hmerscher test
Moderator Tag

Recommended Posts

There was another thread on a similar topic, here:

Basically I would like to get this #prop animation to be seamless, but it has a slight lag once it makes it's full spin around the "circle" before starting the loop again. Having read the post above I knew I needed to work directly with the object3d of the target entity (I am using the AFRAME framework). It appears that  Three JS (underlying AFRAME) uses radians (versus degrees) in order to specify rotations, so I used the 6.26573 versus 360 (degrees). Is there a way to set this up so I don't have that lag from the end of one rotation to the start of the next?


tl.to(target.object3D.rotation, 0.5, { x: 6.26573 });

See the Pen xxbzGNZ by hmerscher (@hmerscher) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @hmerscher

 

First of all, I'd definitely recommend using the latest version of GSAP. Your codepen was using a SUUUPER old version. The new syntax is cleaner too. 

 

The main problem was that there's an ease applied to the rotation. If you remove that ease, you'll get that seamless effect. 

 

See the Pen f4dc44a73a6a538905fd4a555c1e4330 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

Yes, that did fix it, thank you!

 

Since I don't see an ease parameter specified in my code is an ease applied by default and I would need to "remove" the default by adding the ease: "none" to get a linear ease?

 

Plus interesting about the old GSAP code, I grabbed that from the home page CDN - is this not the latest?

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js
Link to comment
Share on other sites

Hey @hmerscher,

 

Yes, you have to set an individual ease - in your case ease: 'none' - because the default is "power1.out".

 

From the docs:

 

ease Controls the rate of change during the animation, giving it a specific feel. For example, "elastic" or "strong.inOut". See the Ease Visualizer for a list of all of the options. ease can be a String (most common) or a function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value. Default: "power1.out".

 

The gsap code in your pen is gsap/1.19.0.

 

And here a cool "wagon-wheel" effect:

 

See the Pen yxOeXK by dansinni (@dansinni) on CodePen

 

Happy tweening ...

Mikel

  • Like 2
Link to comment
Share on other sites

1 hour ago, hmerscher said:

Since I don't see an ease parameter specified in my code is an ease applied by default and I would need to "remove" the default by adding the ease: "none" to get a linear ease?

As mikel said, yes, you have to include ease: "none" or ease: "linear" to get rid of the default ease. 

 

Alternatively you could set the default on a timeline or on GSAP itself:

// Set it on the timeline
// Anything that has tl.foo will use the specified default(s) 
// unless overridden in the tween
var tl = gsap.timeline({ repeat: -1, defaults: { ease: "none" } });

// Change GSAP's default(s)
// All tweens (that aren't inheriting from a timeline) will use the 
// specified default(s) unless overridden in the tween
gsap.defaults({ ease: "none" });

I highly recommend taking a look at our easing docs!

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