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?

In case this might help someone else, I am using Nuxt and I'm adding GSAP to global mixins, and this helped: added the following inside my 'nuxt.config.js' file... build: { transpile: ['gsap'], }

Thanks for pointing me in the right direction, Blake. So after a little research, and a point in the right direction from this GSAP thread (Import gsap to Vue project), I decided to go with a enabling GSAP everywhere by making it a global mixin in Nuxt. (Though if you didn't want to go the global mixin route, Blake's import at the top of the mixin, would work too. I may end up using that instead of the global mixin if I run into any problems, but right now the global version seems to be working for me.) You can view the entire (on-going) project here on codesandbox.io. Essentially how you do it is to create a "gsap.js" file in the plugins folder of the Nuxt project, and then add the following lines to the 'nuxt.config.js' file: plugins: [ '~/plugins/gsap.js' ], The contents of the gsap.js file are as follows (again view it all on codesandbox.io, here). import Vue from "vue"; import gsap from "gsap"; import random from "gsap/all"; import DrawSVGPlugin from "gsap/DrawSVGPlugin"; import MorphSVGPlugin from "gsap/MorphSVGPlugin"; import RoughEase from "gsap/EasePack"; // Make sure to pick a unique name for the flag // so it won't conflict with any other mixin. if (!Vue.__global_mixin__) { Vue.__global_mixin__ = true Vue.mixin({ created: function () { this.gsap = gsap; this.DrawSVGPlugin = DrawSVGPlugin; this.MorphSVGPlugin = MorphSVGPlugin; this.RoughEase = RoughEase; if (process.client) { this.gsap.registerPlugin(this.DrawSVGPlugin); this.gsap.registerPlugin(this.MorphSVGPlugin); this.gsap.registerPlugin(this.RoughEase); } this.random = random; } }) } I should mention that because this is a global mixin in the created hook, that means every object you create that has the created hook, will have this code. One great thing IMO about this is that you no longer need to have an import gsap line in any of your components, mixins, etc. However, a trade-off for that is that instead of just using 'gsap' you now have to use 'this.gsap'. Here's an example snippet of code in one of the mixins: this.gsap.to(pathID, { duration: 0.5, fill: this.defaultColors[i], }); Please have a look at this project, especially if you want to know more about working with SVGs in Nuxt. If you have any feedback or suggestions, I would really welcome any improvements you might think of.

Thanks Blake, just made that link public. Hopefully you can see it now. In the meantime, trying to implement your suggestion.

Thanks Blake, Here's the mixin in question running on codesandbox.io. I'm implementing the mixins on the googleanalyticsSVG.vue file. Once I have it ready to go, I can apply my mixins to the other cards. https://codesandbox.io/s/gsap-cards-fmxr7?file=/mixins/getColorMethod.js

If I drop a gsap call into this method (which is in a mixin for Nuxt), I get the message "gsap is not defined". As soon as I remove gsap, I don't have any problems and the code executes without a hitch. I would post a minimum demo but I'm using Nuxt AND a mixin, so I don't think it's something I can replicate on codepen.io. Thanks for the help. export const getColorMethod = { methods: { getColor() { console.log("getColor IN MIXIN is called"); gsap.to(".gsapTest", { x: 100 }); if (this.getColorCalled == false) { for (let i = 0; i < this.pathIDs.length; i++) { let pathID = this.pathIDs[i]; let theItem = this.$el.getElementById(pathID); if (theItem.hasAttribute("style")) { theItem.removeAttribute("style"); } } this.getColorCalled = true; } return this.$store.getters.getCurrentColor; }, } }; In the main file that calls the mixin, I have gsap imported as well as the mixin: import { gsap } from "gsap"; import { getColorMethod } from "~/mixins/getColorMethod.js"; ... , mixins: [ getColorMethod, ],

I tried using the global method suggested above but I was unable to get the this.$gsap to work... this.$gsap

Thanks, Cassie. I was on the right track...eventually...but your correct answer saved me so much time. I really appreciated your help.

Here's a follow up question for you, Jack, or anyone else for that matter: So in the example Jack provided, the animation plays over a black background to hide parts of the animation. What would be the best way to hide these so I can use the animation on a non-black background? https://codepen.io/sandalwoodsh/pen/eYEqWoZ

Thanks, Jack, the GSAP code version is exactly what I was looking for. Thanks for posting it for me. Looking at the code, I'm so happy I asked for it.

I'm using the GSAP icon in a project. Can anyone point me to the GSAP code I need to make the cape fly? It would be a shame to use the icon without any animation.