We use cookies to enhance your experience on the site

Integration with Animation Libraries

NOVA LAB uses cutting-edge technology — holograms, 3D interfaces, dynamic control panels. Similarly, you can enrich your Vue animations by integrating them with popular CSS and JavaScript libraries. Vue's

<Transition>

was designed with such integration in mind — the custom class names system and JS hooks make it straightforward.

Custom Class Names

Instead of the automatic classes

name-enter-active

name-leave-to

, etc., you can specify your own CSS classes. This is crucial when integrating with libraries such as Animate.css:

1<Transition
2  enter-active-class="animate__animated animate__bounceIn"
3  leave-active-class="animate__animated animate__bounceOut"
4>
5  <div v-if="show">Station status panel</div>
6</Transition>

Vue will apply the provided CSS classes directly to the element instead of its automatic ones. You have 6 custom class attributes at your disposal — one for each animation phase:

```
enter-from-class
```
— replaces
```
name-enter-from
```
```
enter-active-class
```
— replaces
```
name-enter-active
```
```
enter-to-class
```
— replaces
```
name-enter-to
```
```
leave-from-class
```
— replaces
```
name-leave-from
```
```
leave-active-class
```
— replaces
```
name-leave-active
```
```
leave-to-class
```
— replaces
```
name-leave-to
```

You can mix custom classes with named transitions — the specified attributes will override only selected phases, while the rest will use the

name

prefix.

CSS @keyframes

In addition to CSS

transition

(changing from value A to B), you can use CSS

animation

with

@keyframes

— this gives you control over multi-step animations:

1.bounce-enter-active {
2  animation: bounce-in 0.5s;
3}
4.bounce-leave-active {
5  animation: bounce-in 0.5s reverse;
6}
7
8@keyframes bounce-in {
9  0% { transform: scale(0); opacity: 0; }
10  50% { transform: scale(1.15); }
11  70% { transform: scale(0.95); }
12  100% { transform: scale(1); opacity: 1; }
13}

The

bounce-in

animation consists of 4 steps — the element grows, slightly shrinks (a "spring" effect), and stabilizes. On leave (

reverse

), the animation plays backwards.

Difference Between transition and animation

| CSS transition | CSS animation | |---|---| | Change from A to B | Multiple steps (keyframes) | | Requires state change (

-from

-to

In Vue, you can combine both approaches. When an element has both

transition

and

animation

, use the

type

attribute to tell Vue which one to wait for:

1<Transition name="mixed" type="animation">
2  <!-- Vue will wait for the animation to finish, not the transition -->
3</Transition>

Integration with GSAP

GSAP (GreenSock Animation Platform) is the most powerful animation library in the JavaScript ecosystem. Integration with Vue is done through JS hooks:

1import gsap from 'gsap'
2
3function onBeforeEnter(el) {
4  el.style.opacity = 0
5  el.style.transform = 'scale(0.5) translateY(30px)'
6}
7
8function onEnter(el, done) {
9  gsap.to(el, {
10    opacity: 1,
11    scale: 1,
12    y: 0,
13    duration: 0.6,
14    ease: 'elastic.out(1, 0.5)',
15    onComplete: done
16  })
17}
18
19function onLeave(el, done) {
20  gsap.to(el, {
21    opacity: 0,
22    scale: 0.5,
23    y: -30,
24    duration: 0.4,
25    ease: 'power2.in',
26    onComplete: done
27  })
28}

1<Transition
2  :css="false"
3  @before-enter="onBeforeEnter"
4  @enter="onEnter"
5  @leave="onLeave"
6>
7  <div v-if="showPanel">Reactor Control Panel</div>
8</Transition>

Important: When using GSAP (or any JS library), add

:css="false"

to Transition so Vue doesn't try to apply CSS classes simultaneously.

Integration with Animate.css

Animate.css is a popular library of ready-made CSS animations. After adding it to your project:

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Using it with Vue is trivial thanks to custom class names:

1<Transition
2  enter-active-class="animate__animated animate__fadeInUp"
3  leave-active-class="animate__animated animate__fadeOutDown"
4>
5  <div v-if="visible" class="notification">
6    New sensor reading available
7  </div>
8</Transition>

You can control the duration through CSS custom properties:

1.animate__animated {
2  --animate-duration: 0.4s;
3}

Choosing the Right Approach

| Situation | Approach | |---|---| | Simple fade/slide | CSS transition with named classes | | Multi-step animations | CSS @keyframes | | Ready-made effects | Animate.css + custom classes | | Dynamic/complex | GSAP + JS hooks | | Physics simulations | GSAP with ease functions |

Go to CodeWorlds→