Search the Community

The thing about easings is that they are not, well, easy. ‍ Sometimes you need something with more oomph. Something that matches your project's personality perfectly. Something that doesn't feel like it was vibe coded. ‍ That's what GSAP's CustomEase is for—infinite curve possibilities. But... you can easily get lost in coordinates trying to get the animation curve feeling right. ‍ Here you'll be able to skip the coordinate chaos & browse this handpicked collection with: Descriptions that make sense – understand the feel instantly Visual previews – see before you leap Real-world use cases – know exactly when to use each one Copy-paste code – works immediately Browse. Copy. Paste. Animate. Happy easing ✌️ Oh and if you've got a CustomEase you use that think others would like, submit it to be added in. 👉 https://customeasy.dev/ customeasy.dev.mp4

Thank you for reviewing my issue. I can make CustomBounce and MotionPathPlugin work together to a degree, but I can't produce my desired results. You'll understand if you go the codepen linked here - or view its many forked cousins online. I also joined Creative Coding Club for the additional resources. It's been great, and the lessons on SVG animation gave me some instruction that helps. But, alas, I cannot produce the results I need to produce. To be fair, Carl uses an older version of the Custom Ease visualizer in the videos, which does throw me. The GUI is different. My output is not comparable to the output he receives. In this animation, I need much better control over squash and strength - enough to bring 2-3 seconds of levity to an otherwise simple handwriting animation. In simplest terms... What's the best way to combine the functionality of both plugins to control the reactions (especially squash) when the falling circle ("#dot") collides with a letter in the company name or "Splash"? For the visual context, I have provided the Codepen link to the latest attempt. There are many iterations and weeks of effort. For those who want more detail: The small ball drops from above and bounces two-three times between the letters in the company's name. In some versions, it swoops down and gains momentum as it sweeps through the inner curvature in the cursive letter L (id=#Lpath"). It makes sense given the font I've chosen. The animation does not need to adhere strictly to the principles of physics, but it does need to retain some semblance of realism. The purpose is to provide 2-3 seconds of levity to an otherwise simple handwriting animation. In the end, the ball drops one step and dribbles to the slogan "Coding & Design," where it morphs into the dot above the letter i. I can handle that part - the ending. Here are the biggest issues, again placed in the simplest terms : 1) The ball always returns to the origin point, regardless of what I do (transformOrigin: "center center", endAtStart: fase, yoyo:false, or repeat = 0, etc...). I cannot resolve this issue for the life of me. The dot returns with the homing instincts of a carrier pigeon to its starting point. 2) Squash does not work for me. It hates me. The bounce effect works okay, but I cannot make the "squash-bounce" effect work for me when the dot collides with a letter. Adding squash can cause the animation to freak completely. I don't get it. 3) Timing is the big issue in a nutshell. I need the effects to hapen they should happen. Then, I need the dot to return to its original shape in between collisions. I have the same problems when I've added HTML paths and referenced them by id, and when I've not added any additional HTML. It seems like an important, but I still can't get where I need to go. I've come to Wit's End. I'm almost there. It's starting to feel like home. Please help if you can. I'm very grateful for any assistance. Robert

Is there any way that customease can be converted to the cubic-bezier() for css? tks.

To give a quick summary, I want to be able to set the progress/time at which a bezier path will hit each anchor point while keeping both the path and speed/progress smooth, i.e.: var bezier_path = [ {x:0, y:0, progress:0}, {x:0, y:80, progress:0.1}, {x:80, y:80, progress:0.5}, {x:80, y:0, progress:0.6}, {x:0, y:0, progress:1} ]; Essentially what I'm trying to do is the same as @danehansenfrom 2013 if it gives you any inspiration: As you can see in the CodePen, the main method I've tried is correlating the x, y, and progress properties of a bezier tween. The x and y properties tween the moving element and the progress property tweens the parent timeline. Unfortunately it appears that including x and y values in the timeline tween breaks the tween. Hence, I've played with BezierPlugin.bezierThrough to calculate the correlated bezier and then seperate the object properties out for the element and timeline tweens. Unfortunately, TimelineMax.to() with bezier:{} doesn't accept this form of input. I've thought about using CustomEases but unless I know at at what time/progress a bezier anchor point will be reached this is not possible.

Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work. The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined" Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.

Hello, I downloaded GSAP libraries and I tried dealing with CustomEase.js. I've imported it together with jQuery and TweenMax but I got this errore in console: "Uncaught ReferenceError: CustomEase is not defined". What's the problem? Thanks.

Hello! I was wondering if it's possible (or if it already exists) to embed the GSAP CustomEase visualizer onto another page (was thinking a chrome extension)? Or if its hosted by itself somewhere? I find it to be a bit of a hassle to always go to the https://greensock.com/ease-visualizer page. You have to wait for it to load etc. It would be nice if we could have the ease visualizer to play around with. Thank you!

I recently started messing with the CustomEase plugin and I love the freedom to adjust, however I'm finding it difficult to get precisely what I want which is basically 2 presets merged together. Using the visualizer on this page https://greensock.com/customease it seems you can only select one preset, then switch to Custom and adjust it from there. Just wondering is there any way I can select an easeIn say for "Power3" and an easeOut for "Back" and get it to come out as a nice mix of the two? When I adjust the points myself it just doesn't seem quite as smooth. Thanks!

The animation in the Codepen ends using a staggerTo animation. Some info regarding the codepen: It uses the data object to store each tween's settings. There are 2 ways of running the animation: Directly and from the stored data (see above) The initial animation (what I'm calling the direct animation) runs when the page loads and if you click the REPLAY button. Each time it rebuilds using some random settings so runs a little different each time. When you click the PLAY FROM DATA button, I run a function that I'm using in my local app called getGsapData to snag all the data from the timeline and then pass that data to an animateFromData function to exactly replicate what was created randomly. (I have to be able to store the data in a file locally so can't just store the timeline itself. ) THE ISSUE is that when the direct animation runs, the ending staggerTo animation seems to animate each of the items out all at once. But, when you run the animation from the storedData, it seems to animate off the way it's meant to work - staggered. I've been trying to figure out what's different between the 2 for two solid days. Can any of you guys (most of whom are much smarter than me) possibly figure out what the deal is? I can change the staggerTo params in the initial animation and it doesn't seem to change the way the animation runs on REPLAY. The animation data gets sent to a textarea and prints as a pretty json string for perusal. So sorry for the complexity of the codepen but for what I'm attempting to do, I didn't see much I could do to both replicate the issue and simplify the example. I actually did remove quite a bit of stuff.

I'm working on a project where we use TS and would like to add the CustomEase lib. We have added the GSAP through NPM and since CustomEase isn't part of it for some reason I have hard time to find a way to get it working. The error i recive is: !!! ERROR: browserify: Cannot find module '../TweenLite.js' from '/Users/myuser/Projects/myproject/src/ts'

Hi there, I have the following SVG path data that I wish to use as a CustomEase. However, I think that CustomEase might not be properly normalizing this path: M16,350C17.6667,361.8333,18.2157,421,26,421 When pasted into the Ease Visualizer, this is the result: This SVG path data was generated by my new ae-ease-to-gsap-customease script, so it's possible that my script just hasn't generated the correct SVG path data. However, it certainly looks correct, which is why I'm currently suspecting that this might be an issue in CustomEase. Thanks for your time, Alex EDIT: For additional context, here's what this curve looks like in AfterEffects:

Hi, I have a bezier curve generator that generates a bezier curve in terms of x and y coordinates. I want to input that generated bezier curve in the CustomEase GSAP function but I don't know What the values of s, cp, e represent in the CustomEase function. Can you guide me What the values s, cp, e represent in CustomEase and How are they calculated ?