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>
Multiple elements
In addition to the <Transition> component, Vue provides a <TransitionGroup>
for transitioning multiple elements. Mostly this is done with v-for to show
the appearance of a list of items.
We utilise Vue's default group component by using the group flag on
<GSAPTransition>.
<GSAPTransition group>
<li
v-if="someProp"
v-for="item in items"
>
{{ item.name }}
</li>
</GSAPTransition>
Visually transitioning multiple elements is best done with a slight stagger.
To enable a stagger, <GSAPTransition> has to have access to the element's
index, which is done using :data-index="idx" on the transitioning elements.
There is a default value of 0.1s for the stagger, which can be configured.
<GSAPTransition group :stagger="0.15">
<li
v-if="someProp"
v-for="(item, idx) in items"
:data-index="idx"
>
{{ item.name }}
</li>
</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 |
| delay | number, default: 0 | Initial delay of the transition animation in seconds |
| group | boolean, default: false | Wether or not the transition applies to multiple elements. Most of the times paired with v-if |
| stagger | number, default: 0.1 | Delay the appearance of each next element when using group. For this to work you also have to put :data-index="idx" on the element. |
Full Example
<GSAPTransition
:hidden="{ x: -32 }"
:duration="1"
:delay="0.75"
: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>