hmerscher Posted January 13, 2020 Share Posted January 13, 2020 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 More sharing options...
GreenSock Posted January 13, 2020 Share Posted January 13, 2020 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? 1 Link to comment Share on other sites More sharing options...
hmerscher Posted January 13, 2020 Author Share Posted January 13, 2020 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 More sharing options...
mikel Posted January 13, 2020 Share Posted January 13, 2020 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 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 13, 2020 Share Posted January 13, 2020 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 More sharing options...
mikel Posted January 13, 2020 Share Posted January 13, 2020 Hey Zach, Unfortunately there is no reference to default "power1.out" on the page EASES. Kind regards Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 13, 2020 Share Posted January 13, 2020 11 minutes ago, mikel said: Unfortunately there is no reference to default "power1.out" on the page EASES. I added a note about it in the "Notes" section. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 13, 2020 Share Posted January 13, 2020 2 hours ago, hmerscher said: Plus interesting about the old GSAP code, I grabbed that from the home page CDN Hm, your codepen is using 1.19.0 which is from 2016 so that couldn't be from our home page. Anyway, I'm glad it's all figured out now. Happy tweening! 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