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.