SteppedEase.config(1) returning undefined in typewriter code (Using Nuxt, mixin, and GSAP ctx)

[SJH]

I'm using Jack's excellent solution from the end of this post (New way of typewriter) to create a typewriter effect. I'm having problems with this line:

ease: SteppedEase.config(1)

It's returning "undefined" when I run npm run dev.

Unfortunately I can't post a mimimal demo because my problem might be because I'm using Nuxt with GSAP loaded as a mixin and ctx within GSAP.

In my nuxt.config.js code, I have my plugin code...and my transpile code:

plugins: ['~/plugins/gsap.js'],
build: {
transpile: ['gsap'],
},
//I've also installed the extra club greensock files. Here's a snippet from my package.json file:
  "dependencies": {
    "core-js": "^3.25.3",
    "firebase": "^9.18.0",
    "gsap": "file:gsap-bonus.tgz",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10",
    "vuetify": "^2.6.10"
  },

 

 

Here's my plug in code for the mixin:

import Vue from "vue";
import gsap from "gsap";

import random from "gsap/all";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";
import MorphSVGPlugin from "gsap/MorphSVGPlugin";
import MotionPathPlugin from "gsap/MotionPathPlugin";
import TextPlugin from "gsap/TextPlugin";
import SplitText from "gsap/SplitText";

if (!Vue.__global_mixin__) {
Vue.__global_mixin__ = true
Vue.mixin({
created: function () {
this.gsap = gsap;
this.DrawSVGPlugin = DrawSVGPlugin;
this.MorphSVGPlugin = MorphSVGPlugin;
this.MotionPathPlugin = MotionPathPlugin;
this.TextPlugin = TextPlugin;
this.SplitText = SplitText;

if (process.client) {
this.gsap.registerPlugin(this.DrawSVGPlugin);
this.gsap.registerPlugin(this.MorphSVGPlugin);
this.gsap.registerPlugin(this.MotionPathPlugin);
this.gsap.registerPlugin(this.TextPlugin);
this.gsap.registerPlugin(this.SplitText);
}
this.random = random;
}
})
}

 

And here's the code SteppedEase.config(1) that's throwing the error. Is the ctx causing me issues? Not sure.

 

const theLocalSVG = this.$refs.theSVG;
let ctx = this.gsap.context(() => {
this.gsap.set(this.titleBox, {
width: this.textBoxAreaWidth + 37,
});

this.tl_typewriter = this.gsap.timeline({
paused: true,
});
this.tl_cursor = this.gsap.timeline({
paused: true,
});
this.tl_cursor.fromTo(
this.cursor,
{
autoAlpha: 0,
x: 2,
},
{
autoAlpha: 1,
duration: 0.5,
repeat: -1,
ease: SteppedEase.config(1),
}
);

}, theLocalSVG);

 

This one has me stumped. Help me Obiwan(s), you're my only hope.

[elegantseagulls]

Looks like the docs have Stepped ease as:

ease: "steps(1)"

[SJH]

Yes, I read that as well and tried it but it didn't work. Cursor flashes for a second and then it's opacity is zero. Then I realized I forgot to play my timeline. Once I added it.

this.tl_cursor.play();

blinking now. No errors. Works for me.