Ryan DeGorter

  • Content count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About Ryan DeGorter

  • Rank
  1. Ryan DeGorter

    Calling just the ease function

    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
  2. Ryan DeGorter

    Calling just the ease function

    thanks for the lowdown!
  3. Ryan DeGorter

    Calling just the ease function

    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)
  4. Ryan DeGorter

    Calling just the ease function

    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?
  5. Ryan DeGorter

    Calling just the ease function

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