ssr:warn Please gsap.registerPlugin(CustomEase) when using CustomEase with Nuxt 3

[m__shum]

I keep getting a warning about registering custom ease despite having already registered it. Am I missing something here?
Below is the gsap code I'm running in<script setup>

import { gsap } from 'gsap'
import { CustomEase } from 'gsap/CustomEase'
gsap.registerPlugin(CustomEase)
const customEase = CustomEase.create('custom', 'M0,0 C0.29,0 0.311,0.268 0.35,0.502 0.423,0.951 0.756,0.979 1,1 ')
function createTimeline() {
  timeline.value = gsap.timeline({ paused: true, defaults: { ease: customEase } })
    .to(modal.value, {
      height: '100%',
      duration: 0.85,
    }, 0)
    .to(modal.value, {
      opacity: 1,
      duration: 0.75,
    }, 0)
}

 

[Rodrigo]

Hi @m__shum and welcome to the GSAP Forums!

 

Sorry to hear about the issues. I created a new Nuxt3 app here in my local machine and this is working without any issues:

import gsap from "gsap";
import { CustomEase } from "gsap/CustomEase";
import { onMounted } from "vue";

if (typeof window !== "undefined") {
  gsap.registerPlugin(CustomEase);
}

const myEase = CustomEase.create('myEase', 'M0,0 C0.29,0 0.311,0.268 0.35,0.502 0.423,0.951 0.756,0.979 1,1 ');

onMounted(() => {
  gsap.to("h1", {
    x:200,
    y: 200,
    ease: "myEase",
    duration: 2,
  });
});

I would recommend you to use the onMounted hook in your setup.

 

We have this starter template on stackblitz that you can use as a reference:

https://stackblitz.com/edit/nuxt-starter-aih1uf

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Or you could just put the CustomEase inside your onMounted function. The fundamental problem is that you're trying to register CustomEase when window/document don't exist yet. 

[m__shum]

Thank you so much both, I didn't realise that registering a plugin required a valid window instance. Moving this logic to the onMounted hook worked perfectly.