With v-if
A Bonus feature of this module is the <GSAPTransition> component that allows
you to use GSAP transitions on v-if/v-show elements.
<GSAPTransition>
<div v-if="someProp">Hello World</div>
</GSAPTransition>
By default, the wrapped content will animate opacity with a (gsap-)default
duration of 0.5s.
You can add custom properties to the hidden object to customize the animation.
These values will be merged with the default opacity behaviour, so opacity
doesnt need to be specified.
<GSAPTransition :hidden="{ x: -32 }">
<div v-if="someProp">Hello World</div>
</GSAPTransition>
Properties
| Prop | Type | Description |
|---|---|---|
| hidden | GSAPTweenVars | State of the toggled element when hidden |
| duration | number, default: 0.5 | The duration of the animation in seconds |
| appear | boolean, default: false | Wether or not to run the enter-animation on initial load |
| ease | string, default: power1.inOut | The ease of the animation. Can be overriden by the ease modifier in hidden |
Full Example
<GSAPTransition
:hidden="{ x: -32 }"
:duration="1"
:appear="true"
ease="bounce.out"
>
<div v-if="visible">Hello World</div>
</GSAPTransition>
Disabling default opacity animation
If you want to disable the default opacity behaviour, you can set the opacity
property in hidden to 1. This way it will animate from 1 to 1 and
essentially disable toggling opacity therefore.
Example:
<GSAPTransition :hidden="{ opacity: 1, x: -32 }">
<div v-if="visible">Hello World</div>
</GSAPTransition>
Table of Contents