SJH Posted March 28, 2023 Share Posted March 28, 2023 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. Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted March 28, 2023 Solution Share Posted March 28, 2023 Looks like the docs have Stepped ease as: ease: "steps(1)" 2 Link to comment Share on other sites More sharing options...
SJH Posted March 28, 2023 Author Share Posted March 28, 2023 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now