Ryan DeGorter

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

thanks for the lowdown!

Thanks a lot for that, 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)

Hi @OSUblake, Yes it is that framework, however it is the "v1". https://material-ui-next.com/customization/overrides/ I can always ask that framework if they are able to (or plan to). I figured I would check here first. I guess there is no way to output a gsap ease into css native?

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}, },