Problem with animation easing

[Martin Vanegue]

Hi; 

 

I'm still a beginner in this gap world, 

 

First issue:

I can't manage to make my animations smooth. I mean sometimes I do, but I don't how I do it and then when it's not smooth, I don't know how to fix it. 

 

Second issue:

I'd like my text to follow an arc, like around a circle where the rotation point would be a fixed outside point, like  I'd like it to rotate around the center of the page for instance. 

 

 

Thank you all, 

Have a good day

 

 

See the Pen RwdqwKq by Martin-Vanegue (@Martin-Vanegue) on CodePen

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Also check out other common ScrollTrigger mistakes https://gsap.com/resources/st-mistakes/

 

If you remove ScrollTrigger in your demo you'll see that your animation is perfect, so we don't have to debug the animation it self and we can just focus on ScrollTrigger. You already have markers on so that is great! If you pay attention to the markers you can see your end marker at the bottom of the page is already past the marker at the bottom of the element, which means your animation is done, but it hasn't even started yet!? So you have a logic issue here. Your start markers havent even started yet, but your end markers are already done, so as soon as ScrollTriggers starts is sees it needs to finish already, so it sets the progress of your timeline to 100% and thus you'll see a sudden jump. If you reposition your end marker to also be at the top of the page, you'll see everything works as expected. 

 

You also had another issue, when working with timelines the tweens on that timeline can't have ScrollTriggers them selfs only the timeline can have a ScrollTrigger 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

See the Pen LYaXEzw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

1 hour ago, Martin Vanegue said:

I'd like my text to follow an arc, like around a circle where the rotation point would be a fixed outside point, like  I'd like it to rotate around the center of the page for instance. 

 

You can set transformOrigin to an element you can make this any point you like  https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transformorigin#transformorigin

 

If you have a specific path in mind you can also use the MotionPath plugin https://gsap.com/docs/v3/Plugins/MotionPathPlugin/ with it you can have a element follow a specific path, really powerful tool!