Leaderboard

Hello @notgettingstabbed and Welcome to the GreenSock Forum! First off love your forum handle, very funny. Glad you figured it out. Just a handy rule of thumb. Its best practice not to use any negative z-index, since it will cause you cross browser shenanigans due to stacking context of transforms and how z-depth works, aka z-index. You should never go past a value of 0, using z-index: 0 as your most bottom layer. Happy Tweening

I'd probably use ModifiersPlugin to replace your onUpdate because it's more performant than creating a new set() tween on every single update of every element. And I didn't understand why you were creating paused tweens and then using another tween to tween those....to a progress of 3 (remember, progress can only be between 0 and 1). Here's a cleaned-up version: Does that help?

Welcome to the forums, @DivisionBoy. I must admit I feel pretty weird about this. I can't find any record of you purchasing TransformManager (maybe under a different account?), but the most concerning thing is that it sounds like you're taking copyrighted code and porting it without permission and then asking us to help you do it. Do you mind me asking where you got TransformManager to begin with? And are you planning to share this TypeScript version publicly or just for your own use? This isn't something I feel comfortable helping you with, sorry. These forums are free primarily because of our licensing model which entails people paying for certain tools (like TransformManager). https://greensock.com/why-license

Nah, no worries. I've done stuff like that plenty of times. It happens to all of us. Happy tweening!

Looks like you just declared your variables AFTER you called the function that tried to access them. Declare the variables first and you should be fine ??

Welcome to the forums, @RyRInfo! And thanks for being a Club GreenSock member. You can certainly create that effect using GSAP, although I probably wouldn't recommend doing it with background-image because that's limited to whole pixel values for position, so it can look rather jerky at slow speeds. It'd be much better to just use a regular image element or I guess you could use a <div> with background-image, but animate that whole element (and you can make the container <div> overflow:hidden). That way, you get the benefit of using transforms which tap into sub-pixel rendering. It's usually better for performance too. This thread might be useful: If you still need some help, please post a codepen demo that we can peek at. As for GreenSock effect tutorials, we have a learning section at https://greensock.com/learning but there isn't an article specifically talking about the Ken Burns effect. There are tons of GSAP tutorials scattered across the web, though, so Google is your friend Happy tweening!