Leaderboard

Hey @Robert May, this example could be helpful - its still gsap 2.0 https://codepen.io/mikeK/pen/ZwmdYv Happy tweening ... Mikel

Hey, A prehistoric animation, no-scroll https://codepen.io/mikeK/pen/BaNPLNL Stay healthy ... Mikel

Hi @invisibled, The duration of your tween won't make any difference here, as you are advancing the total progress of the tween from 0 to 1, so your duration number could be 0.2 or 100 and the result would be basically identical. I generally just set my duration to 1, so it matches progress in this situation. You'll also want to pause your timeline when you set it as well. Your math to get your duration math should be similar to this: // Get scroll distance to bottom of viewport. const scrollPosition = (window.scrollY + window.innerHeight); // Get element's position relative to bottom of viewport. const elPosition = (scrollPosition - el.offsetTop); // Set desired duration distance. const durationDistance = (window.innerHeight); // Calculate tween progresss (100vh). const currentProgress = (elPosition / durationDistance); I'd also recommend making the jump to GSAP3, if you can. You may also find this article helpful, as it covers similar progress math and a few other approaches to scroll-tied animations with GSAP (the bottom example of this article uses the scroll event listener): https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

@chrisgannon did a nice one (as you describe inside a circle). https://codepen.io/chrisgannon/pen/xqwgPq

Hey Horse friends, These horses elegantly take the curves https://codepen.io/mikeK/pen/Exjzejr And the winner is ... ? Happy riding ... Mikel

Hey @Chronic, Welcome to the GreenSock Forum. You don't need ScrollMagic - just a little parallax logic and everything runs smoothly. And you could use the super GSAP tool motionPath to position objects. https://codepen.io/mikeK/pen/XWbwmZY Happy tweening ... Mikel

Mhhh... I'm not sure if I follow what you're trying to do, but it could be a eased stop to 0 degrees? I remember a sample from @Carl about easing the timescale so partial credit to him, hopefully this is close to what you want to do: https://codepen.io/rhernando/pen/zYGeXEB The idea is to tween the animation instance's timescale to make it faster/slower and then in the stop button use the directional rotation feature of the CSS Plugin to rotate the to the shortest end angle. Now this only scratches the surface of this, since you still need to calculate, according to the current speed, angle and final angle, the time for the stop animation, that should be shorter or longer depending on those factors. Right now it stops the animation using a single time value which can look odd in some cases. Hopefully this is what you're looking for and helps you get started. Happy Tweening!!!

In fact using an useEffect or the corresponding componentDidMount in class components is the best way to be sure that the DOM elements do exist. Keep in mind though, that using that call inside an useEffect hook, will trigger that code every time the state or props of that component are updated, that's why is better to use an empty array as a second argument in the useEffect hook: useEffect(()=>{ // code in here }, []); // empty array ensures that the code is ran only when the component is mounted Also you don't need the useCallback hook to set the DOM elements. In fact I wouldn't recommend it, plus you're not using the hook correctly. The idea of that hook is to create and update values only when the dependencies in the array are updated. Right now you're passing an empty array. Also the constant you're creating is not being used anywhere in your code: // This constant is never used const el = useCallback(node => { if (!node) return; const myTitle = node.children[0]; const mySubtitle = node.children[1]; const myParagraph = node.children[2]; setState(state => [myTitle, mySubtitle, myParagraph]); }, []); Is better to create a unique variable for the parent node element. This code achieves the same result you're getting now: import React, { useEffect} from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { let parentNode = null; useEffect(() => { console.log(parentNode); gsap.set(parentNode.children, { autoAlpha: 0 }); const tl = new gsap.timeline(); tl.to(parentNode.children[0], { autoAlpha: 1, duration: 1 }); tl.to(parentNode.children[1], { autoAlpha: 1, duration: 1 }); tl.to(parentNode.children[2], { autoAlpha: 1, duration: 1 }); }, []); return ( <div className="App" ref={el => (parentNode = el)}> <h1>My Title</h1> <h2>My Subtitle</h2> <p>My paragraph</p> </div> ); } Happy Tweening!!!

Credit to who? That's a fork of one of mine. Just giving you a hard time. Welcome to the forum. Just another little nugget of info for you — you can also use a clip-path for this type of reveal. Masks can also use strokes and gradients so you can get all fancy with them. Here's a little example for you. https://codepen.io/PointC/pen/VwLVxwx Hopefully that helps. Happy tweening.

Hi @supamike, Your code looks good to me. Only thing I see is that you're passing direction into your function and not using it—not a big deal, just noticing. Also, if you're interested, this is pretty easy to do without the waypoints library, using intersection observer api: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

Here is a similar one to the above which may also assist you, using click instead of scroll. https://codepen.io/osublake/pen/df06754f4736f45005fe693f3113049b It was discussed in the following thread (also a mouse wheel one). Below are a few other related pens which you might also find useful to look through. https://codepen.io/sdras/pen/dXoLEJ https://codepen.io/PointC/pen/OMabPa https://codepen.io/osublake/pen/oGoyYb ¯\_(ツ)_/¯

You're importing gsap twice. Either use the import syntax in every file that uses gsap, or add the script to your angular.json file, but not both. When using the import syntax, you only need to import gsap though. There is no need to import TweenLite/Max, TimelineLite/Max, or any of the eases. import { gsap } from "gsap"; https://greensock.com/docs/v3/Installation Eases can be done with strings. gsap.to(element, { duration: 2.5, ease: "bounce.out", y: -500 }); https://greensock.com/docs/v3/Eases And you most certainly don't need jQuery. import { gsap } from "gsap"; gsap.fromTo(".mobile-screen", { marginLeft: "20vw" }, { duration: 0.3, marginLeft: "100vw" }); 👆 animating margins is slow. It would be much better to animate x. And with angular, you really should be using refs instead selector strings. https://www.techiediaries.com/angular-elementref/

You can animate the stop-color too. Here's a fork of your pen with some updates to GSAP3. Hopefully it helps. https://codepen.io/PointC/pen/vYOzeRZ Happy tweening.

Hi and welcome to the GreenSock forums. This basically has to do with encapsulation. Right now you're not using a DOM node element in the JSX, you're using a React component, which is it's own type of object <Twitter />. Because of that you should use forward ref in order to get the reference to the DOM node inside the child component in the parent component. Here is a simple example that shows how to accomplish that: https://codesandbox.io/s/react-hover-forward-ref-ybtgs Happy Tweening!!!

You should probably read through their docs. It says there are events, which you should be able to use to control gsap animations. https://github.com/locomotivemtl/locomotive-scroll

I've been updating my slider demos to GSAP 3 and noticed a difference in endX and a snap array. In GSAP 2 the endX would always be accurate, but in GSAP 3 I'm getting numbers that aren't in the array. At first I thought it was a rounding error, but depending on how you throw the target, you can get some wildly different numbers. Am I doing something wrong here or has something changed when I was on hiatus? Here are comparisons of 2 and 3. https://codepen.io/PointC/pen/ExjRaJV

Good dogs.

Hi, Adobe Animate outputs to canvas. transformOrigin is for a css property for DOM elements. When using Adobe Animate it's important to understand that you can only animate numeric properties of EaselJS Display Objects: https://www.createjs.com/docs/easeljs/classes/DisplayObject.html or values supported by GreenSock's Easel Plugin. In that list you will see regX and regY properties that you can set which is similar to transformOrigin. The regX and regY values are pretty much where the pivot point would be on your Movie Clip. One annoying thing is that if you change the regX or regY it also changes the position of the object. In the demo below I have to offset the position after changing the regX and regY The code below shows how I changed the pivot (or transformation) point. gsap.to(this.default_mc, {duration:3, scale:2, repeat:10, yoyo:true}); this.top_left_mc.regX = 0 this.top_left_mc.regY = 0; this.top_left_mc.x -= 25 this.top_left_mc.y -= 25; gsap.to(this.top_left_mc, {duration:3, scale:2, repeat:10, yoyo:true}); I've attached the fla to this post, but it is also available in my Adobe Animate for HTML5 "not a course" which is a bunch of source files I created to help people struggling with Animate (as I have). change-transformation-point.fla.zip

So add points using that helper (alt + click), copy the path data, and then put the path data inside the d="" quotes. <path id="red-piece" fill="#ff39aa" d="" /> Now move the those points to the melted position, copy the path data, and insert it in thed="" quotes. <path id="red-piece-melted" fill="#ff39aa" d="" />

I am continuing to work with GSAP and learn new and cool things. I recently started playing with the Motion Path Plugin, MotionPathHelper, and drawSVGPlugin. No question this time - just a fun shout out to everyone in this community for GSAP and the help you provide. I will get there eventually.

If you are using ActionScript 3 then you can export to swf and video, maybe gif (its been awhile). The video export with AS3 is excellent with no dropped-frames. Each frame renders perfectly before being recorded. If you are using HTML5 canvas and JavaScript, no the scripted animations can not be exported to video. you will have to run your output file in a web-browser and use a screen recording program. If you need help doing common tasks in Animate with JavaScript check out my "not a course" collection of starter files: https://www.creativecodingclub.com/courses/adobe-animate-for-html5

That wasn't my intent. I was genuinely trying to help you. Those demos show how you can speed up drawing lines using SVGPoints as it might require less updating i.e. setting attributes. That was not clear to me in your original post. You just showed that spring demo. The way I set those up is with the modifiers plugin is to run infinitely. The only reason I did that was to demonstrate how the modifiers plugin works. Normally I would have just used a ticker to animate something like that.

Pro tip: I'll answer anyone's question if they make a bare minimal effort to try and understand my code. Any attempt... that's all I ask, but I can tell you've already done that! 😉 Yes, that changed with v3.... You should never use an underscore to access something in v3 of gsap. There is a proper way to access everything now. Check out the getProperty() function. https://greensock.com/docs/v3/GSAP/gsap.getProperty() And check out the Reusable getter function at the bottom. It will cache the target to improve performance. var getter = gsap.getProperty(inputHandle); var x = getter("x"); var y = getter("y") If you need more help, just let me know.

Once you have your bars math for heights set, the tween for this would look something like, to animate them up from the bottom: gsap.set(bars, {autoAlpha: 1}) // assuming you set a visibility hidden to prevent fouc. gsap.from(bars, {scaleY: 0, transformOrigin: '50% 100%', stagger: .1})

Hey Dimitris and welcome to the GreenSock forums! Sounds like the way to do it to me How to do this depends on your setup. Probably the best way is to have a timeline and pause it. But if it's part of a sequence that should be paused, you could use .addPause() or add a label and tween to that label (instead of just playing it normally). @Carl has made several mini courses covering different aspects of using GSAP. You can get access to all of his content for only $1.99 right now! Our learning section is also a good place to learn.

Hi @ddi-web-team, welcome to the GreenSock forums! Thanks so much for being a Club GreenSock member helping to support us so we can provide all the great benefits of the GSAP tools for everyone! I’m also curious however why do you feel IntersectionObserver is not acceptable even with polyfills? As mentioned above its widely supported. Also keep in mind that ScrollMagic is not a GSAP product so we don’t really offer support here nor recommend it. So these types of related ScrollMagic questions may or may not be fulfilled here on our forums and generally users will be directed to use a more modern and simplified approach. 😉 Regarding IntersectionObserver here is a recent helpful article by one of our moderators, it might help you. https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

CSS support for clip-path is meh. It really needs support for path(). https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility I think CSS will be better option in the future. With SVG, you have to create an new <clip-path> element for each instance. Meaning, if you want to apply the same clip path animation to 4 different elements, but at different times, then you will need to create 4 <clip-path> elements.

Hey @beocycris, Here comes a simple wave for hot water https://codepen.io/mikeK/pen/wvaQGEP Happy tweening ... Mikel

If you want to make it work with SVG you could do something like this: https://codepen.io/PointC/pen/XWbyrOv Hopefully that helps. Happy tweening.

Your issue could be in the fact that you're updating the component's state and the GSAP instances are not stored in state. Blake explained here: And I explained here: I used a lot more words than Blake to explain the same thing (talk about not wasting your time, right? ), that's why Blake's solution works. Zach's approach also is valid and truth be said up to this day, if I'm not obliged by my clients, I don't use Hooks in any React project, nothing wrong with using class components. Happy Tweening!!!

TweenLite, TweenMax, TimelineLite, and TimelineMax is the old syntax. gsap is the new syntax, so use that instead.

I would only direct you to my thought in your other thread here:

You can put callbacks inside the stagger object. gsap.to(elements, { x: 100, repeat: -1, stagger: { each: 0.1, onComplete() { console.log(this.targets()[0]); // <= the current target } } })

Basically the error is that the modal variable is null, therefore it doesn't have a style property. Your code seems quite convoluted IMHO. Why you need the modal height to be 0 at startup? Using opacity: 0 and visibility: hidden in the CSS declaration is enough to prevent the modal from being accessible to the user, that's why we later use autoAlpha: 1 in GSAP, that sets the visibility to visible when the animation starts and the tweens the opacity value up to 1. Finally if you want you can use the classList property to add/remove a class from the body element in the useEffect call: useEffect(() => { tl.reversed(!props.show); if (props.show) { document.body.classList.add("no-scroll"); } else { document.body.classList.remove("no-scroll"); } }, [props.show]); The CSS would look like this: .no-scroll { overflow: hidden !important; } I updated the sample in codesanbox to reflect those changes. Happy Tweening!!!

Hi and welcome to the forum. I'm not sure what you've tried because your demo doesn't have any animation in it. You could make this work with some divs, but IMHO it would be easier with a SVG. Animating line attributes, using GSAP's svgOrigin and simpler masks and clip-paths for the text reveal would lead me to something like this. https://codepen.io/PointC/pen/MWwqrjO Hopefully that gets you started. Happy tweening.

Basically in a functional component anything defined outside the return statement is created again on each re-render, therefore a reference or instance is not created and kept. In some cases if a component doesn't have a state and no props are passed to them you can keep the GSAP instances outside the state since that component will be rendered once in it's lifecycle. But if the component's state or props are updated, it will be re-rendered and you can get an error. Check the following example using the console: https://codesandbox.io/s/gsap-instance-oustide-hooks-py2c6 As you can see I'm logging the value of the variable that holds a GSAP instance. In the first click is an object, as expected. But after the second click, the component is re-rendered and is set to null, but the initial render useEffect is not ran anymore, so we get an error. An alternative is to re-create the animation on each re-render, but that is a waste of code and resources, specially if the animation doesn't depends at all in the component's state or props. Since a menu button animation (the rotation, alpha or other properties being tweened) don't depend on the state, there is no need to create the tween on every render, just in the first one and save it to the component's state. In a regular class component you can store the animation as a property of the class instance, which is far simpler, cleaner and easier to understand IMHO. The joy of using React hooks... Happy Tweening!!!

Actually, sorry, I rushed when I was reading the original post and didn't catch that your particular setup doesn't use names like "setOpacity()" and "getOpacity()", etc. - you use a standard "setProperty()" and "getProperty()" method for everything. That actually makes it even easier: function proxySetters(target, names) { names.split(",").forEach(name => { target[name] = function(value) { return arguments.length ? target.setProperty(name, value) : target.getProperty(name); }; }); } Example: var obj = { _opacity: 0, _x: 0, setProperty(name, value) { this["_" + name] = value; }, getProperty(name) { return this["_" + name]; } }; proxySetters(obj, "opacity,x"); gsap.to(obj, {opacity: 1, x: 100, duration: 2, ease: "none", onUpdate: () => console.log("opacity:", obj.getProperty("opacity"), "x:", obj.getProperty("x"))}); So with the helper function your tweens could be as concise as: gsap.to(proxySetters(this.pageCurlMaterial, "uPosx,uPosy"), { uPosx: 500, uPosy: 100, duration: 2 }); Better?

@InTheOne I've updated the sliders and posted them in the original thread. Happy tweening.

Great catch, @PointC. That required a minor tweak to each of the following: core GSAP, Draggable, and InertiaPlugin. Basically it had to do with the fact that the new InertiaPlugin can automatically set the duration of the tween and there was a scenario where the order of things running on the first render (in this case Draggable pushing the tween to the very end to figure out the endX/endY) would figure out the progress value based on the OLD duration. Anyway, here's an updated fork of your codepen that seems to work well for me: https://codepen.io/GreenSock/pen/0032a8092f2f421e9dd4dde3dae56c68?editors=0010 Better?

JavaScript isn't CSS. With string interpolation, you need to make sure that the only differences are numbers. Everything else should match, so you need to have vw next to your 0. TweenMax.to(BackgroundToAnimate[0], time, {clipPath:"polygon(100vw 0, 100vw 0, 100vw 100vh, 0vw 100vh)"}); https://codepen.io/osublake/pen/7d49525ced44c61796e0ea0b016bc300

@Friebel I totally get why this would seem unintuitive in your scenario. Explanation and complicating factors In general, Timelines (except the global one) can't have animations with NEGATIVE start times. In other words, children can't be placed before the very start of the timeline. There are several reasons: animation.progress(0) would become meaningless. As soon as a timeline has an infinitely repeating animation, it effectively has no start or end theoretically. Currently we handle the "end" by just using a very large value, so practically-speaking it's infinite but not really. But doing that for the start too is quite thorny, like the progress(0) thing. GSAP has performance optimizations that determine when a particular animation needs to render, otherwise it's ignored. If the parent's playhead is before the start or after the end, it shouldn't need to be rendered (well, there are a couple of edge cases that are exceptions and those are already taken care of). Making a child extend BEFORE the start time of its parent makes this optimization practically impossible. Currently when a negative startTime is sensed, all of the children are moved forward and the parent timeline is moved backward to adjust things accordingly and keep it "legal" (but this is visually imperceptible). If we allow infinite backwards repeats, this now becomes even more problematic. ALL other animations in the timeline would have their startTimes moved forward by a LOT (assuming we use a big number instead of literally Infinity). That might strike developers as even more unintuitive. Furthermore, this could lead to odd behavior. Imagine building a sequence where things fade/move in and then...I dunno...a strobe light fades in and pulses "infinitely"...and then you reverse that animation or you jump to the beginning...the pulse would render at the very start!! That, I think, would be quite unintuitive. Any way you slice it, you're gonna have some scenarios where you can point to a behavior as seeming "unintuitive". Solution: Zach's suggestion with setting the progress to 1 is good, but technically there's a risk of a very slight time creep with that because if it updates 60 times per second, there could be a few milliseconds of gap between the second-to-last render and the final one that triggers the onReverseComplete. Most (if not all) other animation engines I've seen don't protect against that time creep, but GSAP does. So you could just use an onReverseComplete to call a function that adjusts the playhead according to the rawTime: function infiniteReverse() { this.totalTime(this.rawTime() + this.duration() + this.repeatDelay()); } gsap.timeline({repeat: -1, onReverseComplete: infiniteReverse}); ... https://codepen.io/GreenSock/pen/a1b972ee89d219f000d93ca49f3ca55d?editors=0010 Does that help?

v2 can't parse config methods in ease strings, so you need to use object form. ease = Elastic[easeType].config(1, 0.3); Other notes. It's wasteful to keep creating the same jQuery object over and over again. Just do it once. let $this = $(this); let duration = $this.data('anim-custom-duration'); let xFrom = $this.data('anim-custom-xfrom'); let xTo = $this.data('anim-custom-xto'); let yFrom = $this.data('anim-custom-yfrom'); let yTo = $this.data('anim-custom-yto'); Or don't use jQuery. let duration = Number(this.dataset.animCustomDuration); let xFrom = Number(this.dataset.animCustomXfrom); let xTo = Number(this.dataset.animCustomXto); let yFrom = Number(this.dataset.animCustomYfrom); let yTo = Number(this.dataset.animCustomYto); You don't need to pass a jQuery object to gsap. And you don't need to set units as px is the default. TweenMax.fromTo(this, duration, {delay: 0.25, autoAlpha: 0, x: xFrom, y: yFrom}, {autoAlpha: 1, ease: ease, x: xTo, y: yTo}); https://codepen.io/osublake/pen/2278497285883a7f09befd0046c728cf

First, this is using the new GSAP3 syntax, which won't work with version 2.x (which appears to be what you're importing). As @GreenSock said, the Getting Started page is super helpful. But if you're super new to HTML and CSS, learning JS is going to be pretty overwhelming on top of that. It's important, from a learning and understanding standpoint, to have a good knowledge of the basics of HTML and CSS down before you dive into learning (JS and) GSAP. That said, to get started, you're HTML file should look similar to this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- custom css --> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <!-- stuff on your website --> <img src="logo-man.svg" /> </body> <!-- GSAP --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script> <!-- custom js --> <script src="scripts.js"></script> </html>

Hey leleo and welcome to the GreenSock forums! It's generally best to create a minimal demo of the issue so that the thread can be more useful to people who look at the thread later. Using a live site like what you're doing makes it susceptible to being changed (like if you fix the issue or update the page design). If you open up your developer tools and go to the performance tool you can see that there are some updates to the layer tree, recalculating styles, laying out, and then more updating the layer tree before it finally paints. This is likely due to your animation of the widths of the images. I highly recommend using scale instead which doesn't cause all of the reflow. Another performance improvement you can make is to drop ScrollMagic It's not a GreenSock product and we don't really recommend using it. You can do the same type of animation on scroll without it. Here's a simple demo on how to do so: https://codepen.io/GreenSock/pen/dyoOgYj That's probably not a big cause of issue in this case, I just really don't like the library. I also noticed that you're using GSAP version 3.1.1. Why not upgrade to the latest and greatest, version 3.2.4?

You would greatly benefit yourself if you setup your SVG more cleanly. You should align the motion path with the pipe and make sure the masks are where you need them to be once you've done that. Then you can just use path: "#motionPath", align: "#motionPath", to align your elements to the path and move them correctly no matter where they start from. Side notes: You don't need to register gsap. It doesn't make much sense for gsap to register gsap, does it? If you want a different duration for each one, you probably don't want to change the original duration, do you? That would make the later ones come much later than the rest - I think you want a scoped duration instead so it doesn't affect the original? i.e. something like var myDuration = aniDuration + Math.floor(Math.random() * 200); You should use a .set() instead of a .to() with a duration of 0. You should use your dev tool's console to look for warnings and errors - it was pointing out that you don't have a ball0 so you should start your counter at 1 instead. Please never write a for loop like this 🤣 for ( i = 0; i < 5; i++ ) { This is much more standard and readable: for (var i = 1; i < 5; i++) {

I'm not entirely clear on what you want to happen without a demo. As @ZachSaucier mentioned, it doesn't need to be the real project. Just a simple demo showing us the problem. That being said, I'd probably add another rectangle to the mask which is the full size of the group being masked and toggle its visibility. Again, I have limited information about what you're doing, but maybe something like this: https://codepen.io/PointC/pen/qBdpwqj Happy tweening.

PS Just FYI. If you do want to use getElementsByClassName(), this is a fork of your pen showing that option. https://codepen.io/PointC/pen/poJpdaY Happy tweening.

Hi and welcome to the GreenSock forums. Texture is a property of the Sprite display object and can be changed manually using code, I've done that in the past without any issues. There are a couple of things you need to keep in mind though, first the texture's base texture has to be ready by the time the sprite is updated (using the base texture's instance loaded method), and second I'm not sure it can be done in the regular GSAP fashion, meaning that is not something you want or need to update on every GSAP tick. Perhaps use an event callback like onStart or just a regular function to update the texture. Finally make sure that the base texture and hence the texture itself do exist before updating the sprite, since the error stems from this: http://pixijs.download/release/docs/packages_sprite_src_Sprite.js.html#line201 More specifically line 215. Perhaps @OSUblake can shed some light into this, since He is the PIXI master of this realms Happy Tweening!!!

Hey dotun. Welcome! You can animate an element along a path on scroll using a method like this: https://codepen.io/GreenSock/pen/zYGboPp?editors=0010 You'll have to handle resizing though. It'd likely make sense to put most of the code I have in the demo above into a function and call that function on resize. Feel free to ask if you need help understanding the calculations that I made.

Best not to scale the group you're masking. Try using a parent group around the one you'll be scaling and mask the parent. <g mask="url(#masker)"> <g id="husky-color" > <!-- paths --> </g> </g> Looks like you'll need to make some change to the mask position and rectangle too since you're using a nested SVG with a different viewBox. For the record, I'd strongly recommend not using nested SVGs as they're nothing but trouble. Just my two cents. Hopefully that helps. Happy tweening.