SJH

Whispers to PointC, "But the motion path examples listed here are way beyond what I need to do. I need something drop dead simple...then maybe I could stretch the path to fill different mobile screens."

I know the JS code makes little difference in its current state. I matched it to what I had previously. I plan to make the shape dynamic by binding the ellipse in Nuxt and stretching it to various screen sizes.

Your examples are awesome. Thanks for the replies. I went pure JavaScript. Question though: how to flatten the ellipse? It's too tall. https://codepen.io/sandalwoodsh/pen/eYPzVYv

Is there any easy GSAP equation to loop through a collection of SVG groups and place them on an ellipse or possibly other shapes? I'm trying to resize my parent SVG to any mobile device screen and then position the SVG icons based on the new screen width and height. In the codepen example I've hard coded them into place but I'd like to do that programmatically.

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.

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.

I think both answers provide a solution depending on one's needs. I definitely realize that PointC has a much broader and deeper depth of knowledge; so I bow to his expertise.

https://codepen.io/sandalwoodsh/pen/eYLMYLd The solution I opted for was to clone the object and append the clone to the SVG; that way the original remains intact. Since I only want to bring the group <g> to the front, it works for my purposes. Once I'm done with the clone, I can remove it and the original element still exists in its proper layer within the SVG stack.

I am able to move a grouped element within my SVG to the front of all other elements using appendChild, but how do I put it back into the same Z level that I took it from? Before the appendChild code runs the Firebase group is on the bottom of the SVG stack; after the code runs it is on the top. How do I put it back to its original bottom position.

Thanks Jack, I will look into your suggestions. I knew that I had two elements with an id of "text". That's how I accidentally stumbled upon the fact that I could use the typewriter effect to re-write the text within an SVG. My thinking behind changing the text in the SVG rather than floating the "wrapper" on the screen via JavaScript was so that I wouldn't have to figure out the coordinates to move my "wrapper". Looks like I'll have to do that anyway. Thanks again for the suggestions and links.

added minimal demo at top of this thread

https://codepen.io/sandalwoodsh/project/editor/AezBkm It's not a pen but a project. Rather than one big blob of code I've separated them into individual files. Hope that helps.

This is related to this thread. Jack came up with a great solution for a multi-line typewriter solution! He really did! But now I'm trying to make multi-line SVG text fields within the SVGs themselves so I don't have to use JavaScript to position the typewriter text on the page. I'm setting the value of the text for the typewriter dynamically. The main problem I'm running into is within the SVG itself. I can achieve the typewriter effect within the SVG but I don't know how to break the text across multiple lines, here's the example code within the SVG: <text transform="translate(450 287)" fill="#f00" font-family="Roboto-Bold, Roboto" font-size="8" inline-size="50"> <tspan id="text" x="0" y="0" letter-spacing=".11em">This text will be replace by the typewriter effect</tspan> </text> As you can see, I tried to use inline-size because I read it was the syntax to create line breaks but it's not working. You'll need to look at the thread I'm referencing above to give you context. Click on the icon to change the SVG viewbox and begin the typewriter code. The white text is the wrapper div in the html; the red text is the text within the SVG block.

Yes, Jack! That's awesome! Exactly the answer I needed!!! This is why GreenSock is the best! Friggin' amazing! Thanks again, Jack!

This works great for a single line but the cursor cannot jump to a new line when the text goes beyond a single line. Thoughts?