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 ?

Perfect that did the trick. Thanks very much. Only thing I needed to do was change the `background` to `fill` for it to work with my SVG.

OK so I made some progress and update the pen. However, I'm getting... "Invalid property" "style" "set to" "fill:#1ABFD3" "Missing plugin? gsap.registerPlugin()" .. when the event fires.

Hi, I have page with some some squares defined as buttons. I have a function that attaches an onClick handler to each the buttons which works fine, however I can't work out how to add a mouseover animation to each of the buttons. I've attached a codepen that demonstrates what I have so far.

Hi this is close to what I’m looking for. Is there a way to scale the top or bottom edge to a specific size? Basically I have a box that I want to scale along one dimension only to make room for another box.

Very helpful. Thank you.

Thanks, just tried that. So my SVG is not base64 encoded. I'm still not getting the fill and stroke tweens though.

Hi, I've embedded my base64 encoded SVG into my CSS but the fill and stroke tweens seem to be ignored. See the Codepen example. What am I doing thats wrong? Here's the SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125.368 104.307"><path fill="#8F5E8D" d="M85.194 86.885v17.422l4.494-5.123c4.84 5.1 4.8 5.1 4.8 5.123V86.885c-1.302 1.04-2.898 1.38-4.52 1.38-1.555.035-3.168-.365-4.768-1.38zm4.813-15c-3.536 0-6.754 3.403-6.754 7.175 0 3.7 3.2 7.1 6.8 7.1s6.755-3.405 6.755-7.15C96.762 75.3 93.5 71.9 90 71.885zm27.657 12.635c.313 0 .95-.364.95-1.04s-.637-1.013-.95-1.013h-15.106c-.637 0-1.276.337-1.276 1.014 0 .7.6 1 1.3 1 15.082.02 15.118.02 15.118.04zm-15.106 5.8h15.1c.313 0 .95-.704.95-1.38 0-.338-.637-1.014-.95-1.014h-15.106c-.637 0-1.276.676-1.276 1 .005.674.624 1.374 1.324 1.393zm22.497-17.76C110.91 57.9 110.9 57.9 110.9 57.895c-.325-.34-.638-.677-.962-.677H94.835c-3.535 0-6.114 3.066-6.114 6.81v3.096c0 .7.6 1.4 1.3 1.4.67 0 1.31-.676 1.31-1.354v-3.095c0-2.026 1.596-3.744 3.536-3.744h13.5v8.53c0 3.7 2.6 6.8 6.1 6.818h8v22.2c0 2.055-1.275 3.405-3.19 3.405H102.55c-.638 0-1.277.703-1.277 1.717 0 .7.6 1.4 1.3 1.4h16.7c3.533 0 6.084-2.73 6.084-6.5V73.69c.014-.39.046-.79-.254-1.13zm-10.613 0c-1.912 0-3.532-1.69-3.532-3.743v-6.812c9.964 10.6 10 10.6 10 10.555h-6.468zM48.872.252C22.494 13.6 22.5 13.6 22.5 13.565h57.6L53.366.3C52.09-.084 50.146-.084 48.9.252zM22.176 104.307h57.9v-89.39H22.19v89.39zm40.523-81.2c3.53 0 6.4 3.1 6.4 6.812 0 3.43-2.878 6.5-6.41 6.5s-6.44-3.07-6.44-6.508c.01-3.718 2.944-6.818 6.444-6.81zm0 19.786c3.53 0 6.4 3.1 6.4 6.8 0 3.435-2.878 6.5-6.41 6.5s-6.44-3.065-6.44-6.5c.01-3.693 2.945-6.793 6.445-6.8zm0 19.807c3.53 0 6.4 3.1 6.4 6.476 0 3.77-2.878 6.838-6.41 6.838s-6.44-3.067-6.44-6.838c.012-3.476 2.95-6.476 6.45-6.496zm0 20.104c3.53 0 6.4 3.1 6.4 6.474 0 3.77-2.878 6.84-6.41 6.8s-6.44-3.067-6.44-6.84c.01-3.338 2.945-6.438 6.445-6.433zM39.54 23.107c3.534 0 6.4 3.1 6.4 6.8 0 3.434-2.9 6.5-6.436 6.5-3.22 0-6.116-3.066-6.116-6.5.035-3.707 2.912-6.807 6.112-6.8zm0 19.793c3.534 0 6.4 3.1 6.4 6.812 0 3.435-2.9 6.5-6.436 6.5-3.22 0-6.116-3.065-6.116-6.5C33.423 46 36.3 42.9 39.5 42.892zm0 19.78c3.534 0 6.4 3.1 6.4 6.475 0 3.77-2.9 6.838-6.436 6.8-3.22 0-6.116-3.067-6.116-6.838C33.423 65.7 36.3 62.7 39.5 62.68zm0 20.124c3.534 0 6.4 3.1 6.4 6.5 0 3.77-2.9 6.84-6.436 6.84-3.22 0-6.116-3.068-6.116-6.84.035-3.404 2.912-6.504 6.112-6.5zM0 104.307h18.6V35.04H0v69.267zm9.333-61.414c3.19 0 6.1 3.1 6.1 6.812 0 3.435-2.9 6.5-6.09 6.5-3.536 0-6.435-3.065-6.435-6.5C2.898 46 5.8 42.9 9.3 42.893zm0 19.786c3.19 0 6.1 2.7 6.1 6.47 0 3.403-2.9 6.473-6.09 6.5-3.536 0-6.435-3.07-6.435-6.475-.01-3.78 2.892-6.48 6.392-6.5zm0 20.12c3.19 0 6.1 3.1 6.1 6.8 0 3.432-2.9 6.5-6.09 6.5-3.536 0-6.435-3.068-6.435-6.5-.01-3.7 2.892-6.8 6.392-6.8z" /></svg>

Hi, Is there a simple GSAP example that demonstrates animating SVG sprites using CSS loaded from .svg files? I've seen the Kiwi (http://codepen.io/GreenSock/pen/gpDrC) example, but it seems a little convoluted and seems to use a lot of CSS trickery. Is there anything a little more simple? Carl