Ivo Dolenc

Hey @violacase glad you like it. I'm interested in adding support for premium plugins but I need additional guidelines so I'll wait to see what the GSAP team will say.

Hi, I just bumped into this ? @GreenSock @ChristosTsangaris Thanks for sharing, I appreciate it. I see that many people have the same problem with importing Gsap into Nuxt. It's actually very easy. I will share a few tips. There are two (most common) ways to import Gsap into Nuxt: 1. Global import Create Nuxt plugin and import Gsap // ~/plugins/gsap.js import { gsap } from 'gsap' // Inject gsap's core for global use export default (context, inject) => { inject('gsap', gsap) } Enable it in nuxt.config.js // nuxt.config.js export default { plugins: ['~/plugins/gsap.js'], } Access GSAP globally by using this.$gsap <!-- index.vue --> <template> <div> <h1>NUXT GSAP</h1> </div> </template> <script> export default { mounted() { this.rotation() }, methods: { rotation() { // Access GSAP by using 'this.$gsap' this.$gsap.to('h1', { rotation: 27, x: 100, duration: 1 }) }, }, } </script> 2. Local import (import it in every file where you use it) Let's say you want to use it in 'About' page: <!-- about.vue --> <template> <div> <h1>NUXT GSAP</h1> </div> </template> <script> import { gsap } from 'gsap' export default { mounted() { this.rotation() }, methods: { rotation() { gsap.to('h1', { rotation: 27, x: 100, duration: 1 }) }, }, } </script> But you also want to use it later in the 'Contact' page. All you need to do is repeat the import process: <!-- contact.vue --> <template> <div class="content"> <div class="box"></div> </div> </template> <script> import { gsap } from 'gsap' /** * Gsap plugins * * Use 'process.client' to avoid 'Window is not defined' errors * This is due to the 'server-side' rendering. */ if (process.client) { const { ScrollTrigger } = require('gsap/ScrollTrigger') gsap.registerPlugin(ScrollTrigger) } export default { mounted() { this.animateOnScroll() }, methods: { animateOnScroll() { gsap.to('.box', { x: 500, ease: 'Power1.easeInOut', scrollTrigger: { trigger: '.content', pin: true, end: 'bottom', scrub: true, }, }) }, }, } </script> <style> .content { width: 100vw; min-height: 200vh; } .box { width: 100px; height: 100px; background-color: #00c58e; } </style> Another option to consider is Nuxt Gsap Module If you don't want to bother with these steps (manual instalation and import), simply install nuxt-gsap-module and you are ready to go. I developed this module to simplify installation process. When you install and enable the module, it will automatically inject the GSAP's core into the nuxt context and you can use GSAP globally trought the app. No need to manually import GSAP into additional plugins (clean workflow). This is very useful because someone unfamiliar with Nuxt (SSR) may have trouble integrating GSAP into the nuxt plugins (a common problem with "Window is not defined, etc."). Also, the module allows you to add additional GSAP add-ons such as ScrollTrigger etc. with a few line of code (true or false) inside main nuxt.config.js file. Pros: - Helps you integrate GSAP javascript animation library - Allows you to easily animate elements via custom v-gsap directive - Provides a solution for global use via this.$gsap - Zero-config setup ready to go Cons: - Unfortunately, it doesn't support GSAP Club plugins (at the moment) Sorry for long post ? and I hope this helps someone.