ynamite

I see. Makes sense, thanks for explanation. Good to know it's not a bug. Indeed, what Zach wrote helped solve the issue. Thanks a lot. Happy as a clam for now.

That does indeed work better. Also I didn't realize gsap could understand vh units (and never bothered to try). That's pretty sweet. Thanks!

Oops, I apologize, I must've messed with the fiddle after posting it (or entered it wrong initially) ... in my project I'm using a percentage value for top – for the reason stated in the previous post. I've updated the fiddle to reflect that.

@ZachSaucier Because I'd like to animate the div relativ to the parent and not relative to itself. As I understand it, transforms work relativ to the element that's being transformed, position values are relative to the closest parent which has position relative. No? Don't mention it, thank you for this awesome library that just keeps on giving

Hi there I'm experiencing an issue with scrollTrigger animating the top CSS property (with a percentage) of an element that also has its bottom property set in CSS, after changing the browser window height. I realize this is a little edgy (setting both bottom and top values), but it is working in all browser I've tested so far and only breaks when resizing, so I figured I'd mention it regardless. What do you guys think?

@ZachSaucier I've managed to fix the problem while whipping up a demo, but thanks for your fast reply (mind boggling how quickly you guys reply, every time). Turns out I had two issues: I was dynamically loading CSS after initializing the scrollTrigger in question. Secondly I hadn't realized that when initializing scrollTrigger on an element, it wouldn't automatically set the triggers (startTrigger and endTrigger) as that element. Setting the triggers explicitly seems to have helped. @GreenSock Sure thing, I'll supply a demo next time don't mention it, it's the least I can do and only fair. One last question: how many individual scrollTriggers is it safe to have on a single page, performance-wise? In this case, in order to animate in/out different content types with different animations, I'm using maybe 5 or 6 scrollTriggers per page.

@Jack Quick question, wondering if I'm experiencing the same or a similar issue (my intention isn't to hijack this thread). If not, I'll create my own thread I'm building an animation with scrollTrigger and scrub, mostly animating xPercentage or yPercentage values. When I resize my browser window the values for the start and end trigger positions don't seem to update/reflect the changed window dimensions. Is this the same issue? BTW, this plugin is the bees knees, truly jaw dropping. I've decided to renew my membership to support you guys. About that: is the permanent license basically a lifetime license?

Oh wow, thanks a lot for the fast reply, that seems to have done the trick! as you pointed out it was my (old) math that was off. I didn't bother to double check because it seemed to be working correctly before. By the way, this was just a simplified test case, in reality the script is part of a much larger app with images provided by a CMS, but it seems to work nicely now. I missed those, thanks! Very useful. Yep, that doesn't make a lick of sense and is kinda embarrassing. Copy and pasted it like a moron. Thanks so much, learnt a lot! This seems to be exactly what the issue was

Hi there Been using GSAP for years, love the library and use it almost daily! It's awesomecakes. This is my very first forum post I believe For a project I'm working on I'm using my own quite simple Ken Burns implementation, which works without using timeline. There's probably a much better and more efficient way to code this effect so I'm open to suggestions. I've successfully used this approach in the past (at least in a very similar fashion) and didn't experience the issues I'm having now (see here: https://mikebravo.ch/). The reason it was working then eludes me. Could be because I was doing something different (CSS maybe? unsure) or it could possibly be an issue with the latest version of GSAP – I was using TweenMax 1.19.1 then. I've experienced these issues in two different browsers, latest Firefox and Safari versions, which leads me to believe that they aren't related to a specific browser. Anyway, as for what the issues actually are, I'm having two (or maybe three) different but possibly related problems. You'll probably have to watch the animation in the Codepen for a moment to see the issues appear (usually happens within a few seconds though, max. 30 Seconds) : sometimes, usually within the first few animation cycles, the image being animated is being scaled from 0 up, even though that should never actually occur because the value being scaled from/to should always be higher than 1; the scale values I'm using reflect this fact if printed to console. sometimes the animation simlpy ends or pauses for 1 or more cycle/s. When it does end it just seems to die completely. I'm not sure whether it would resume if I waited long enough, but I don't think it ever would. sometimes the image disappears and same as before, the animation ends/hangs up and usually refuses to continue. I've tried a couple of things: using fromTo() in place of to() adding a timeout before the cycle restarts added killTweensOf($el) applied the animation to the parent Div, but the same issues occur (which excludes the image itself as the culprit, I think) tried using parseTransform: true after reading about that on these boards Any ideas what the issue might be? Am I missing something obvious? Thanks a lot for any help!