Jump to content
Search Community

Calling just the ease function

Ryan DeGorter test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,

Interaction designer here, learning to prototype with react and the material-ui framework, so i'm a little new to this stuff.

The framework has a way to over-ride their theming properties, so I'm looking to over-ride it with gsap.  I'm trying to figure out how to just call the easing function (for example sine) to over-ride their css cubic bezier.   Below you can see that I am trying to over-ride their 'sharp' animations with gsap.  How would I do that? 

transitions: {
   "easing": {
     "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
     "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
     "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
     //"sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
     "sharp":  {Sine:easeInOut},
   },

Link to comment
Share on other sites

Hi @Ryan DeGorter

 

What framework are you referring to? This one?

http://www.material-ui.com/#/

 

Based on the code you provided, it doesn't look like you can override one of those eases with a GSAP ease, or any JavaScript based ease for that matter.  A demo could always prove me wrong, but it looks like those eases are strictly CSS based. Animations that are built into a theme are usually pretty hard to override, particularly if they are CSS-based.

Link to comment
Share on other sites

Yeah, CSS and WAAPI cannot use JS based eases. 

 

 You might be able to get close to some of GSAP's eases using these values.

 

easeOutCubic = cubic-bezier(.215,.61,.355,1)
easeInOutCubic = cubic-bezier(.645,.045,.355,1)
easeInCirc = cubic-bezier(.6,.04,.98,.335)
easeOutCirc = cubic-bezier(.075,.82,.165,1)
easeInOutCirc' = cubic-bezier(.785,.135,.15,.86)
easeInExpo' = cubic-bezier(.95,.05,.795,.035)
easeOutExpo = cubic-bezier(.19,1,.22,1)
easeInOutExpo = cubic-bezier(1,0,0,1)
easeInQuad = cubic-bezier(.55,.085,.68,.53)
easeOutQuad = cubic-bezier(.25,.46,.45,.94)
easeInOutQuad = cubic-bezier(.455,.03,.515,.955)
easeInQuart = cubic-bezier(.895,.03,.685,.22)
easeOutQuart = cubic-bezier(.165,.84,.44,1)
easeInOutQuart = cubic-bezier(.77,0,.175,1)
easeInQuint = cubic-bezier(.755,.05,.855,.06)
easeOutQuint = cubic-bezier(.23,1,.32,1)
easeInOutQuint = cubic-bezier(.86,0,.07,1)
easeInSine = 'cubic-bezier(.47,0,.745,.715)
easeOutSine = cubic-bezier(.39,.575,.565,1)
easeInOutSine = cubic-bezier(.445,.05,.55,.95)
easeInBack = cubic-bezier(.6,-.28,.735,.045)
easeOutBack = cubic-bezier(.175, .885,.32,1.275)
easeInOutBack = cubic-bezier(.68,-.55,.265,1.55)

 

Some eases, like bounce, can't be done with a cubic-bezier. And some of those names are different in GSAP.

Quad = Power1

Cubic = Power2

Quart = Power3

Quint = Power4

 

  • Like 4
Link to comment
Share on other sites

2 minutes ago, Ryan DeGorter said:

I've only seen "cubic" functions in css, but haven't seen quad/quart/quint.  But I'll keep looking. (Again, interaction designer here trying to also fill in the visual/animation role)

 

The cubic you're thinking of is probably a cubic-bezier ease. CSS doesn't have a cubic, quad, quart, quint, sine, circ, expo, or back ease, but you can get close to those types of eases using the cubic-bezier values I posted above.

 

If you're curious, most of the eases GSAP and other animation libraries use are called Penner easing functions... or equations. Just Google that to get the lowdown on what most easings are based on.

 

And since you're limited to CSS eases, the best place to experiment with eases is probably cubic-bezier.com

 

 

 

  • Like 1
Link to comment
Share on other sites

Yeah, one of the worst things about CSS/WAAPI is the very limited easing options. You simply CAN'T do a lot of the expressive eases (as Blake indicated). However, you can try to get close by using our ease visualizer. Just select the ease you want to emulate, then toggle over to "Custom" and make sure you have NO anchor points (CSS can only do a single cubic-bezier segment), and drag the control points on the very end (the handles) to best mimic the original ease curve. Again, most of them you won't be able to match. 

 

Then, in the bottom where the code is, you'll see the custom ease data. The string you want will look kinda like "M0,0,C0.116,0.676,0.532,1,1,1". Ignore everything before the "C" and the last two numbers ("1,1"). Plug them into the cubic-bezier and you're done. So, for example:


 

//before...
"M0,0,C0.116,0.676,0.532,1,1,1" 

//after...
"cubic-bezier(0.116,0.676,0.532,1)"

 

I hope that helps. Of course it makes me sad that you're forced to use CSS instead of GSAP :)

 

Good luck with the project.

  • Like 4
Link to comment
Share on other sites

Well,

It is a react framework, so I'm not entirely limited to using CSS.  I can utilize the TransitionGroup component to use GSAP.  I've started doing that already. (Although convoluted, but that is a separate topic altogether).

My hope was to override their themes, so I can propagate a given ease across all the components.  Lets say we wanted a custom bounce effect.  I was trying to over-ride the left menu's default animation with one from GSAP. (without having to wrap it into a separate component, yada, yada).  

The framework uses JSS to compile their CSS. (Not sure what all that means - this gets a little past my understanding as a designer).  I've reached out to their forum to see if it is at all possible, (and whether its in the realm of a designer being able to do without getting bogged down with too much code).  So maybe there is some hope :) 

Link to comment
Share on other sites

You might want to check and see if there is a way to disable animations, or at least some of them. In Angular material, there is way to disable animations, allowing you to provide your own with a little work. I realize that you're using completely different, but there might be a similar option. Just a thought.

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