Easing
With GSAP 3 the easing functions are more easily usable as string without importing. They can be used in the "ease" prop of the Tween
.
Have a look at the docs: https://greensock.com/docs/v3/Eases
The default is power1.out
. You can overide the defaults if you want: https://greensock.com/docs/v3/GSAP/gsap.defaults().
import { Controls, PlayState, Tween } from 'react-gsap';
Ease function with parameters
SlowMo ease
This is an extra ease that has to be registered first:
import { gsap } from 'gsap';import { SlowMo } from 'gsap/EasePack';gsap.registerPlugin(SlowMo);
Custom easing function
You can also pass a function to the ease prop. In this way you can have your custom easing functions.
In the example it's an easeInOutQuart
. Take a look at this resource for inspiration: https://easings.net/