cbourne

Hi based on the above example, I would like to include some text within the appended rectangle. Could you please show how to do this.

Great that did the trick. Thanks very much.

So in my SVG, I have this: <rect id="test" class="cls-23" x="55.95" y="63.64" width="85.14" height="60.94"></rect> I want to append above this. So if this was a group, how would I target it ?

Great - thanks for this. If I want to target and add the rectangle to an ID within the SVG, how would I do this ? I

Does GSAP support appending items to exiting SVG ID's ? I have an SVG documents with an id of "test" and want to append a simple circle to it. So basically target the "test" id in the svg and append a circle to it. <div id="scene1-svg" class="chart"> <svg> ... <rect id="test" class="cls-23" x="55.95" y="63.64" width="85.14" height="60.94"></rect> ... </svg> </div>

Hi OK, so changing my import from from "gsap/TextPlugin"; to "gsap/dist/TextPlugin"; resolved the issue. I notice the GSAP install helper creates this for ES Modules import { gsap } from "gsap"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(TextPlugin); and this for UMD/CommonJS import { gsap } from "gsap/dist/gsap"; import { TextPlugin } from "gsap/dist/TextPlugin"; gsap.registerPlugin(TextPlugin); Assume I should have been using the UMD/CommonJS option for Svelte ? Also, prior to using the TextPlug my import for my Svelte app was just this, i.e. the ES Modules way, and everything worked OK. import { gsap } from "gsap";

OK so here's a Stackblitz minimal example - however it works here, bit not in my local environment. I'm using Svelte 3.54.0. If I comment out the gsap.registerPlugin(TextPlugin);line It doesn't throw the error, so the problem seems be related to the registration functions. https://stackblitz.com/edit/vitejs-vite-qnyedf?file=src%2FApp.svelte

Hi, I'm trying to use the TextPlugin.However, I get the following error when I try to register the TextPlugin. TypeError: Cannot read properties of undefined (reading 'default') at +page.svelte:5:20 at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22) at Object.default (root.svelte:42:40) at Object.default (/src/routes/+layout.svelte:72:33) at AppShell.svelte:53:63 at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22) at eval (/src/routes/+layout.svelte:48:88) at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22) at root.svelte:41:39 at $$render (/node_modules/svelte/internal/index.mjs:1892:22) I've followed the docs and have installed like this. All other core GSAP features are all working perfectly. import { gsap } from "gsap"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(TextPlugin);

Perfect - thank you. Exactly what I needed.

Hi, I'm trying to build a basic toggle that highlights/fills a selected box when clicked. Basically highlights the selected box. Is there an easy way to do this with GSAP without building out a load of logic using the CSS selectors ? i.e. Highlight an active selection.

Perfect this is exactly what I needed. This works with my SVG nicely.

Here's what I now have: https://codepen.io/carlskii/pen/mdGBNmO

Hmm.. So I tried the Attribute Plugin using this code, but it doesn't work with my SVG. Actually it doesn't seem to work with the basic div's either. let elements = document.querySelectorAll('.button'); let clickEvent = (e) => { console.log('some event content here...') console.log("----------------" + e.target.id + "----------------------") } elements.forEach((item) => { item.addEventListener("mouseenter", ()=>{ gsap.to(item, {attr: {fill: "#F2653A"}, duration: 1, overwrite: "auto" }); }); item.addEventListener("mouseout", ()=>{ gsap.to(item, {attr: {fill: "red"} ,duration: 1, overwrite: "auto" }); }); item.addEventListener('click', clickEvent) }); });

Hmm.. So I tried the Attribute Plugin using this code, but it doesn't work with my SVG. let elements = document.querySelectorAll('.button'); let clickEvent = (e) => { console.log('some event content here...') console.log("----------------" + e.target.id + "----------------------") } elements.forEach((item) => { item.addEventListener("mouseenter", ()=>{ gsap.to(item, {attr: {fill: "#F2653A"}, duration: 1, overwrite: "auto" }); }); item.addEventListener("mouseout", ()=>{ gsap.to(item, {attr: {fill: "red"} ,duration: 1, overwrite: "auto" }); }); item.addEventListener('click', clickEvent) }); });

Don't think "backgroundColor" works with SVG. Is there a universal attribute ?