Jump to content
GreenSock

jjmolnar

GSAP easings issue

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello gsap members,

I have one issue with gsap easings and i m stuck.

In my personal project only work power0 - power4 (basic without in, out, inOut - these are not working as well), when i use others, it animates, but not in a way it should. In this codepen i tried your template and also some easings work, some not.

 

There has to be something obvious that I do not see
Any help is much than appreciated

See the Pen xxRrOjB by Buzzworthy (@Buzzworthy) on CodePen

Link to comment
Share on other sites

//    gsap.to("h1:nth-of-type(2)", {
//      duration: 1.5,
//      x: "25%",
//      ease: "SteppedEase"
//    })

 

Comment this out and it works.

 

There is no SteppedEase declared, so your code doesn't go any further.

You probably forgot it was there.

Link to comment
Share on other sites

Thx for the answer but in my project as i mentioned, no other easing work then just power0 - power4. If i use custom ease, or elastic, or any other it just animate in a default way. Is there something obvious that i miss? Attaching an example of how do i call it. The whole gsap works flawlessly and i use it for all my animations, but i struggle with this issue to change the easing to a custom one.

Screen Shot 2021-02-18 at 12.42.53.png

Link to comment
Share on other sites

Tailbreezy, i probably do not describe my issue correctly. it works in your pen, it works in my pen, but when i copy paste all this to my project, none of the easing work as expected. Is there any rule how to use this in my wrapped js functions?

Link to comment
Share on other sites

Hmm I have these. I use it inside the requestAnimationFrame, where i check the distance of the nav from top (bc i have smoothscroll). When i put it outside requestAnimationFrame, it works perfectly. Is there a way of how to make it work inside the raf function? At least i know the issue now. Thanks in advance @tailbreezy

Link to comment
Share on other sites

Do your other eases work in the raf?

 

Probably the customEase is not in scope anymore.

Link to comment
Share on other sites

every animation looks almost the same inside the raf no matter if i have elastic, bounce, power. It seems like it s calling the animation 60x a second which makes it stuck. I m thinking of getting the value of raf, print it outside of the raf and use the magic there. Or you think there is any other workaround using it inside?

Link to comment
Share on other sites

Probably raf is interfering with gsap since I can imagine that is what gsap is using under the hood.

 

As seen in the blob from github.

 

image.png.43cde70f0cb7a9ef0052689dfc83a71d.png

 

Why do you even need to put gsap in raf, since that is what it is doing out of the box. What are you after here?

Link to comment
Share on other sites

I want to measure the distances from the top of my viiewport and then trigger animations. I use baptiste briel smoothscroll plugin and raf is the only method (that i know) thanks to which I can listen to scrolled distances.

Link to comment
Share on other sites

  • Solution
59 minutes ago, jjmolnar said:

I use it inside the requestAnimationFrame

Almost certainly your lack of ease is due to a logic issue. 

 

8 minutes ago, jjmolnar said:

I want to measure the distances from the top of my viiewport and then trigger animations. I use baptiste briel smoothscroll plugin

Are you using ScrollTrigger? You probably should be. You should set it up to use a .scrollerProxy() to work with smooth scrolling. You probably don't need to use your own raf.

 

If you need additional help, please create a minimal demo of your situation that recreates the issue.

 

34 minutes ago, tailbreezy said:

Probably raf is interfering with gsap since I can imagine that is what gsap is using under the hood.

No, you can have multiple rafs.

  • Like 1
Link to comment
Share on other sites

Quote

No, you can have multiple rafs.

 

 

You can put a gsap tween into a raf? Why would you? I can imagine this will break.

Link to comment
Share on other sites

Just now, tailbreezy said:

You can put a gsap tween into a raf?

Sure, there's no rule against it. requestAnimationFrame only does just that - requests the next animation frame. Often times this is looped so that you have a basic ticker functionality but it doesn't have to be.

 

It wouldn't make much sense to be animating the same properties of the same elements in tweens that are overriding each other inside of a looped raf sequence. But there's nothing wrong with having a raf and using GSAP on the same page.

  • Like 3
Link to comment
Share on other sites

@jjmolnar is there any way you could share an example of the ease(s) not working? 

 

FYI, you were using the wrong syntax in that original CodePen for SteppedEase - the GSAP 3 syntax is much simpler:

ease: "steps(12)"

And yes, it sounds like you either didn't register something (CustomEase or EasePack), or maybe you're using a really old version of GSAP (v2 and earlier) that didn't have things like Elastic or SteppedEase in the core (you had to load EasePack).

 

Once we can see the problem reproduced in a minimal way, I'm sure we can identify what the issue is and offer some advice. 

  • Like 2
Link to comment
Share on other sites

Thank you, i ll add it to the codepen soon.

Link to comment
Share on other sites

They work as Zach pointed out.

 

The raf is constantly changing your initial value of the "to" tween. and in the end you are animating from 150 to 150. Which shows no animation.

 

Verify with

 



onUpdate() { console.log(gsap.getProperty('p', 'x'))}

...


onUpdate() { console.log(gsap.getProperty('h1', 'x'))}

 

And by the way, my browser hangs (the magic of raf) Caution advised.

  • Like 2
Link to comment
Share on other sites

Yeah i will have to go with scrollTrigger scroll proxy instead.

Thank you guys for your help. Much appreciated

Link to comment
Share on other sites

Also, just to be clear, your example creates a huge memory leak and compounding performance problem because you're literally creating 60 new tweens per second (assuming 60fps) that are constantly repeating and fighting each other for control of the same property of the same element. Definitely don't do that! :)

 

So after 1 minute, you've got 3,600 tweens all fighting (3,599 more tweens than you need). At the very least you should set overwrite: true to avoid the build-up, but there are definitely better ways to code that. 

 

I'm trying to understand why you were putting it in a requestAnimationFrame() and constantly creating new instances. I don't mean it as a criticism - I'm genuinely trying to wrap my head around your original goal so that I can better advise you about a more appropriate way to do it. 

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