Revuelution: Using GSAP with Nuxt3

Animations have become an integral part of modern web design. They add life to the website and make it more engaging for the user. GSAP (GreenSock Animation Platform) is a powerful animation library that can be used to create complex and creative animations on the web. In this blog post, we'll explore how you can use GSAP in Nuxt3 to create stunning animations.

What is GSAP?

GSAP is a JavaScript animation library that provides a high-performance animation platform for the web. It allows developers to create complex animations with ease and speed. GSAP is widely used by developers and designers around the world due to its versatility and performance.

What is Nuxt?

Nuxt3 is a progressive JavaScript framework that builds on top of Vue.js. It provides a modern development experience for building web applications. Nuxt3 comes with many features out-of-the-box, including server-side rendering, static site generation, and improved performance.

Using GSAP in Nuxt 3

Let's first create our Nuxt project

npx nuxi init <project-name>

Now go into the project directory and run npm i.

Let's install GSAP

We can install GSAP with npm as well:

npm install gsap

Once we have done this we can register the plugin in our app.vue

<script setup>
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
</script>

<template>
  <!-- Build your app here -->
</template>

The last thing you need to do is to adjust your nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['@/assets/styles.css'],
  build: {
    transpile: ['gsap'],
  },
});

Now we already can use GSAP. You can find some examples on stackblitz.

The Revuelution

If you are using Nuxt you probably want components that you can use over and over again. Animating your website or specific components also is much easier if you got one component that takes care of the animation right?

Luckily there is a superhero: https://github.com/kevinkoessl/

How it started

There was a Revuelution but it caused a lot of errors in the beginning. SSR and scroll animations are not best friends. This was something you could not use.

Debugging was also not easy. The tech stack in that combination is pretty new and there was not a lot of information about it.

How it looks now

I did not work on this project, but I'm really happy that I can use it! It started with errors and now we have a couple of components we can use out of the box!

You can take a look at the GitHub Repository to see how the errors were fixed.

Take a look at revuelution.com! It's amazing and super fast to set up. Let's see it in action!

Setting up Revuelution

Simply run:

npm install revuelution --save && npm i @css-render/vue3-ssr --save

Creating a plugin

The next step would be to create a plugin in our plugin directory. You should now this from the look at Vuetify with Nuxt. Let's create a file called revuelution.plugin.js

import { setup } from "@css-render/vue3-ssr";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const { collect } = setup(nuxtApp.vueApp);
    const originalRenderMeta = nuxtApp.ssrContext?.renderMeta;
    nuxtApp.ssrContext = nuxtApp.ssrContext || {};
    nuxtApp.ssrContext.renderMeta = () => {
      if (!originalRenderMeta) {
        return {
          headTags: collect(),
        };
      }
      const originalMeta = originalRenderMeta();
      if ("then" in originalMeta) {
        return originalMeta.then((resolvedOriginalMeta) => {
          return {
            ...resolvedOriginalMeta,
            headTags: resolvedOriginalMeta["headTags"] + collect(),
          };
        });
      } else {
        return {
          ...originalMeta,
          headTags: originalMeta["headTags"] + collect(),
        };
      }
    };
  }
});

The nuxt.config

Go back to your nuxt.config and add now:

export default defineNuxtConfig({
  ...
  css: ["revuelution/styles.css"],
  ...
});

Congratulations, you can use Revuelution now!

Revuelution in Action

Using GSAP now is as easy as breathing. Create a component and add the GSAP components around the content you want to animate. You even can create more animation within each other. Just like this:

<script setup>
import { RUnderline } from "revuelution";
import { RSlideIn } from "revuelution";
</script>

<template>
  <r-slide-in>
    <r-underline>Hello World!</r-underline>
  </r-slide-in>
</template>

How does it work?

Well, slots are all we need. If you take a look at the SlideIn Component:

<template>
  <div>
    <div :id="`start-trigger_${_uid}`"></div>
    <div :id="`r-slide-in_${_uid}`">
      <slot></slot>
    </div>
    <div :id="`end-trigger_${_uid}`"></div>
  </div>
</template>

The slot is where your content will be rendered. You also have a lot of props so you can configure these components to your needs!

Conclusion

We have a real hero: https://github.com/kevinkoessl/!
Thanks a lot for this Open Source Project. It's now super easy to animate your website and bring some life into it. Even with just a handful of components you already can do a lot. If you want to animate your Nuxt website you should take a look at this Revuelution!