Last Updated:

Transitions between pages on Vue and GSAP

Vue and GSAP

Today we're going to show you how to implement transitions between pages on Vue and GSAP. Vue is an open-source JavaScript framework for creating user interfaces in the reactive programming paradigm and GreenSock, also known as GSAP (GreenSock Animation Platform) is an effective and professional HTML5 animation class, their combination will create wonderful transitions between pages, and what we have done with this you can see further.

 

If you want to create a website using a ready-made adaptive template, with technical support and installation assistance.

Transitions between pages on Vue and GSAP. Step-by-step implementation instructions.

Step 1. HTML

First, let's create a markup, we will have a small one, since most of it will be implemented through the vue script, but we need to organize the general layout of the slides:

<!-- Slide-->


<div id="app">
<component :is="state.view">
<h*>{{ state.view }}</h*>
</component>
<controls></controls>
</div>


<!-- Management -->
<template id="controls">
<ul class="controls">
<li v-for="(animation, index) in state.animations" @click.prevent="setView(animation)" v-bind:class="{ 'active': animation === state.view }">
{{animation}}
</li>
</ul>
</template>


<!-- Transitions -->
<template id="page">
<transition
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
appear
>
<div class="page" v-bind:class="state.view">
<div class="center">
<slot></slot>
</div>
</div>
</transition>
</template>

In addition, we will have a variable that will change thanks to Vue when selecting a certain slide, it will be an animation and a caption to it.

Transitions between pages on Vue and GSAP

Step 2. CSS

Next, we need to add a few styles, some of them are necessary for the demonstration to work, first we set the general parameters:

#app {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: #4c4c4c;
background: -webkit-gradient(left top, right bottom, color-stop(0%, #4c4c4c), color-stop(36%, rgba(43, 43, 43, 0.74)), color-stop(71%, rgba(28, 28, 28, 0.5)), color-stop(100%, rgba(19, 19, 19, 0.29)));
background: linear-gradient(135deg, #4c4c4c 0%, rgba(43, 43, 43, 0.74) 36%, rgba(28, 28, 28, 0.5) 71%, rgba(19, 19, 19, 0.29) 100 %);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
color: #fff;
}

Each page we have will be stylized and defined using styles:

 

By default, each slide will be gray, but we decided to add a little color, and colored each slide in its own color:

.fade {
background: #461467;
}


.slide {
background: #ffba57;
}


.zoom {
background: #ffc8bb;
}


.flipX {
background: #00dfcf;
}


.flipY {
background: #8ed3c9;
}


.slideUp {
background: #f5dd79;
}

Step 3. VIEW/JS

All the work will be tied to this script, including markup and labels, and the same buttons, which is very convenient:

 

Transitions between pages on Vue and GSAP. Conclusion.

For each page, we will have our own block, in total we will have six different slides with transitions, which are displayed in "transitions and slides".