tganyan

Appreciate the response, and sadly you're confirming what I suspected might be the case. I do have one solution in place that basically sets the scale back to 1 and then a hard width and height on the element at the exact end of the animation; it's not perfect, and I don't think it scales all that well, but it gets pretty close to the goal for this project. Will have to chat about it with my designers tomorrow morning and see what's preferred. Thanks again!

I'm in the middle of creating an effect that involves scaling down a parent container and adding rounded borders to it in the process. The issue I've come up on is that scaling it down, particularly if I need to reduce the width more than the height, is messing with the border radius and I'm not certain how to address this. I did read elsewhere that animating width and height, instead of scaling, fixes the issue, however when I use width and height it sometimes creates this stutter effect that I can't have and scale tends to eliminate that. I have this issue open on stackoverflow as well, but the GSAP forums are always so great and responsive I thought I'd check over here as well. Codepen is dumbed down for the sake of offering a simple example of the issue. Thanks in advance for any advice on this!

I wanted to circle back around here and just update that @OSUblake pointed me in the right direction and it would appear exposcale is the answer to my challenges here. Still need to refine my usage of it, but I've seen enough of it in testing to feel pretty confident that it will work. Thanks! (and sorry for the late response, work keeps me busy!)

This looks promising, thank you! It'll probably take me today and tomorrow to get the bandwidth to read up on this, but I'll make sure and update here to let you know where I land. Appreciate the speedy and friendly response (as always)!

I'm having an issue where it's looking like I need to wrap my head around counter-scaling, but bottom line is I need to do a version of the linked codepen animation, but with the parent element ("#image-card-container") using scaleX and scaleY instead of width and height for the resizing. The reason for this is that, if you watch very closely, the animation has a slight shimmy as it resolves (becomes more egregious at larger sizes), and it seems to me the way to solve that is to use scale instead of width/height. The issue that creates, however, is it messes with the scaling of the child element in really weird ways and I'm not sure how to set it up to replicate this codepen behavior, but with the parent scaling instead of using width / height. I had a similar post around this several months back and was ultimately unsuccessful in getting a clear path forward; I'm hoping this time around I'm able to show the challenge/ask a bit more clearly and might have better luck.

I have updated the one with intended behavior to use a green box with text instead of the placeholder image, hopefully that helps the issue. Although, I'll reiterate that the placeholder image was not the only thing in there and there's a standard container with a solid 1px border, so it's very odd that you literally would not see anything at all. Are there any known pitfalls with codepen and this kind of thing that I may not be aware of? Some kind of setting I should have on the pen to ensure it shows here? I've posted this way in this forum several times and have never had an issue. EDIT: I've now updated both pens to only be using simple colored divs, no placeholder images or anything. Hopefully this helps (working pen has some wonky stuff going on right now and I'm only able to edit a little bit at a time today, so might be more useful to focus on the initial pen).

I'm using images from placeholder.com and they're showing just fine from what I can see, not sure why you wouldn't be seeing anything. Are you literally not seeing anything at all (seems strange that neither Nico or Jack mentioned not being able to see my pen)? Because part of it is a container with a solid border, so you should at least be seeing that even if for some reason the placeholder images aren't showing. I'll look into the clip path reference you linked, I just remember having a really difficult time getting standard rounded corners to work with a clip path when I've tried it in the past. I've been trying to counter scale it and it's just being really counterintuitive and difficult to figure out, will just keep hammering at it.

Thanks for the great responses. This at least gets me closer to what I need to do, although changing to x/y and scaling has introduced a new challenge. The intended effect of this is that the outside container shrinks and moves, but the image inside does not shrink or move with the container. The pen in my initial post shows this, linking it again below. I'm currently working with this in a separate pen (wanted to leave the initial one as-is so things don't get confusing in this thread). It seems that changing the values to scale and x/y is suddenly forcing the image to shrink and move with the container, which is definitely not the intended effect. Also, given Nico's very helpful response with the clip path, I should also mention that the container needs to have rounded corners so I think clip path is out (to my recollection you can't have border radius with clip paths, but keep me honest there). I'm continuing to work on it as time allows, but any tips of suggestions on this would be greatly appreciated! initial pen (with the jerkiness): https://codepen.io/tganyan/pen/YzQELEr working pen (attempting to get x/y and scale to play nicely): https://codepen.io/tganyan/pen/YzQYQWm

My issue is pretty straightforward. The linked animation isn't totally smooth; if you watch closely, it's got a subtle jerkiness to it and I have no idea why. I've seen a few posts similar to this but haven't found any solutions that seem to work for me, so any insight would be much appreciated. EDIT: I should also share that I found a post that mentions putting a super subtle rotationZ setting on the animation, but it didn't seem to impact anything when I attempted it (either it doesn't work for my issue, or I didn't understand the solution well enough and didn't implement it correctly)

Thanks, this is a lot to look through. Currently reading your tutorials to see if this helps clear things up, but having the hurdle that I'm like 85% dev and maybe 15% designer, so I don't have direct access to some of the tools (AI) and don't have enough of a nitty gritty comfort level with svgs to do some of the prep that seems to go on in those tutorials (relying on designers to prep these for me). As such, struggling a lot so far to adopt what I currently have to work with, which is basically just a free sample SVG from Creative Fabrica that more or less mimics what I'll ultimately need to animate, to what you've shared so far (in case I'm not being clear, this is a shortcoming on my end, not a criticism of the wealth of info you've shared with me here). Going to keep reading, but was hoping (perhaps naively) that there would be something a bit more out-of-the-box that could do this for me. I guess I don't get to be lazy today Thank you for all the info you've shared so far!

I am trying to test out the drawSVG plugin to see if it will work for something I need to build, but I literally can't seem to get it to do anything and I'm not sure why. Initially I set up my own pen independently, with no luck, and then decided to fork the demo pen to make sure I'm not including any resources incorrectly. I have no real particular goal here, except to just get it to do anything at all, which at the moment it is not. The code here is intentionally extremely simple; I feel like there must be something pretty obvious that I'm missing, hoping someone can set me straight.

I'm trying to basically add functions to a timeline and get them to play one after the other. I feel like I've done this before but I can't seem to get it to work this time. I don't have an active codepen for this at the moment, apologies for that, but I think the issue is fairly straightforward so a codepen may not be necessary in this case (if it's called for in the replies I'll throw one together). Code adding function to timeline: tl.add('frame-1'); tl.add(frameTimeline('f1'), 'frame-1'); if (feed.F2_Headline_1) { tl.add('frame-2', 'frame-1+=3'); tl.add(frameTimeline('f2'), 'frame-2'); } frameTimeline function code: function frameTimeline(frame) { const frameTimeline = new TimelineMax({paused: false, repeat: 0}); buildFrame(frame); return frameTimeline; } buildFrame function code: function buildFrame(frame) { let splitText1 = ''; let splitText2 = ''; let staggerDuration1 = 0; let staggerDuration2 = 0; let lineDuration = 0; headline.innerHTML = frameHeadline.replace(/\n/g, '<br>'); subhead.innerHTML = frameSubhead.replace(/\n/g, '<br>'); splitText1 = new SplitText(headline, {type: 'lines', wordsClass: 'word', linesClass: 'line line-++', position: 'relative'}); splitText2 = new SplitText(subhead, {type: 'lines', wordsClass: 'word', linesClass: 'line line-++', position: 'relative'}); lineDuration = 3 / (splitText1.lines.length + splitText2.lines.length); staggerDuration1 = lineDuration * splitText1.lines.length; staggerDuration2 = lineDuration * splitText2.lines.length; tl.staggerFromTo(splitText2.lines.reverse(), staggerDuration2, {autoAlpha: 0}, {autoAlpha: 1}, lineDuration); tl.staggerFromTo(splitText1.lines.reverse(), staggerDuration1, {autoAlpha: 0}, {autoAlpha: 1}, lineDuration); } I left out a huge switch statement that's in the buildFrame function because that function is working as expected and I felt it would blow up the post unnecessarily. The basic point should be pretty well illustrated by the first two code snippets in which I am trying to run the frameTimeline function once for the start of the timeline (frame-1 position) and then if there's a second headline in the feed I'm working in run the function again but for frame 2 after frame 1 is done. The current behavior is that the timeline just waits and then runs frame 2 without ever showing frame 1 (although the function does run when debugging with breakpoints). Again, if a codepen example is helpful here I'll add one, I just didn't because I wasn't convinced it was worth the effort given that the issue SEEMS pretty clear to me. Thanks in advance for any help on this!

Dude, you are a rock star. I was losing my mind hahaha

I'm trying to create an animation with a sprite sheet but things are not going as I expected. It seems very simple: I have a 40 frame horizontal sprite image so I have a .to tween that using stepped ease with 40 passed in to the config. The image is absolutely positioned and is set to move -4000% to the left (40 * 100). I've done this with other sprite images before with no real issues so I'm at kind of a loss for why this doesn't seem to be working. The main issue is: The image does not seem to be "stepping" but is just smoothly transitioning through as if there were no stepped ease. A fresh set of eyes and some veteran advice would be greatly appreciated here.

Thanks! Looks like I'll have to read up some more on svg masks; I have an understanding of what a mask is/does generally speaking, but I still am not quite sure I understand why this particular mask is getting the desired effect. Which I'm sure comes down to a lack of intuition on this from being less experienced. Update: Nevermind, I definitely get it. I hadn't noticed that the target element in the js was changed to the mask and not the regular motionpath. On initially looking at the markup, I thought just the motionPath was still getting animated and it made no sense to me, this does though.

So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.

Thanks again for the quick reply. Frankly, I have no idea why applying it all to a timeline wasn't working before (the explanation you provided aligns pretty much with my understanding of the distinction between tweens/timelines). I forked your codepen over, since there's less mess in the js, made the switch and it all works just fine so there must be something in the other codepen that's causing a problem there. That code was quickly becoming spaghetti anyway, so best to just start fresh.

Man, this community really is awesome on the feedback, both in speed and clarity. Thanks a ton to both of you; I've been a dev for a while now but just have never had to do much with SVGs so this is sort of a mystery box for me. I have one more question. This one is purely gsap related and not necessarily directly related to the SVG animation stuff, but it's tripping me up a bit and reading the docs isn't quite clarifying things to the level that I'm looking for: What is the functional difference between something like "TweenMax" and "new TimelineMax". Optimally I would be tying all of this in to a singular timeline, i.e. "const tl = new TimelineMax() . // tl.to(bezier stuff)", but when I try to switch that in for TweenLite the animation fails (no error messages, just no animation). I have a general understanding of the high level difference between the two, but the literal issue I'm trying to address is this: I want to be able to add labels at any given point in my timeline and that seems to error using TweenMax/TweenLite, but if I switch things over to using a timeline the bezier animation fails. Is there a good solution to this? Just want to say again that you guys rock, it continues to blow me away how responsive and friendly people are in the forums here.

Ok, so as I get closer to what I'm actually trying to build, I've come up on a couple more issues that are of note. I have a couple things in mind that I could do to solve these two issues, but might as well mention them in case there's a simpler, more straightforward solution than whatever hacky solutions I may think up. This is in the same codepen. I now have a dashed line that the arrow follows, and it works just fine with 2 exceptions: 1. The arrow is traveling from right to left instead of left to right and I really have no clue why this is happening (my random guess is maybe it has something to do with the motion path and the start/end values that gsap is looking for?). Using .reverse() method on the motionPath array fixes the issue (which is the current state), but I want to make sure there isn't something more fundamental here that I should be aware of. 2. The arrow spins around at the end of the path, which is unwanted. It seems like this has to do with the autoRotate setting (no spin when I remove that), so it might be as simple as figuring out a way to force it to stay in its current position before it tries to spin back around. Again, this is something that I'm confident I can cobble together something that fixes it but I want to be sure I'm not missing something fundamental in how this works and possibly there's a setting that I'm not finding in the docs that handles this well. https://codepen.io/tganyan/pen/JVKREg

That's exactly what I needed. From just a quick glance, it looks like you just got rid of the xPercent and increased the yPercent, as well as specifying 90 for the autorotate. When I have a minute I'll take a closer look to see if you did anything else there, but I think largely it comes down to just a lack of experience with SVGs and with this plugin. Thanks!

I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).

I'm in the middle of dogfooding GWD for my own company and recently approached this same question just so I could at least address it in my notes. It is possible, and fairly easy, to integrate GSAP with GWD: Switch to code view Paste the GSAP CDN in the head along with the other CDNs in there Write GSAP code as you normally would inside a script tag The issue here to me really comes down to your reasons for needing to do so (does the need and benefit of having a GUI outweigh the clunkiness to process that would result from integrating GWD and GSAP). First of all, the code editor in GWD is far and away inferior compared to almost any other pure code editor, so it's an immediate step down in that regard. Secondly, you have a balancing act now between the GWD css based timeline of animations and what GSAP is doing; it's not impossible to coordinate by any means, but just an extra context switch that really shouldn't be necessary. Thirdly, integrating it into GWD doesn't really gain any advantage from the GUI because all GSAP stuff would still have to be done in code view, so there will still be scenarios where those who are less code friendly will need to either learn it or pass the task to someone who is comfortable in that environment (not to mention that this doesn't help consistency, i.e. someone accomplished an animation in a more complex way with GWD and tons of keyframes, but then someone else accomplishes a similar animation in a few lines of GSAP, and now you have two ways to skin the same/similar cat in your creatives). Finally, just an extra small kink in the hose, it seems that the editor in GWD (design view) doesn't acknowledge any GSAP code; you have to open up a preview to see it work, which can definitely slow you down. I know this is an old post, and for the sake of the OP I hope it no longer applies to you haha, but in case anyone else is looking this kind of thing up I thought I'd add my long winded reply based on recent experience.

Good to know either way, if wisdom is conventional there's almost always a good reason for it haha. Thanks again for the assistance!

Thanks! As stated in my original comment, I tried x and y but still had the same issue. It looks like clearing it has fixed the flicker. Just curious though, is there another reason why x and y would be preferable to absolute position values in this case?

So I'm still pretty new to GSAP and just playing with simple shapes and movement to get a full grasp of things. I have a timeline that triggers a secondary timeline that repeats until user clicks somewhere on the body. All of that works just fine, but I'm noticing that when the secondary timeline starts (tells the div to just move to a random location over and over), a lot of the time it flickers badly before its next movement. This doesn't happen every time but happens most of the time (same in both Chrome and Firefox). I've tried animating both left and bottom properties, and then changing it to x and y to see if it made a difference (based on the advice I saw in another post), and neither seemed to have any impact on the issue. Some clarity on what I'm doing wrong here would be awesome!