GreenSock

Do you mind me asking why? That seems incredibly wasteful. "resize" events fire VERY frequently, so doing all those calculations constantly while the user is resizing seems like it'd be terrible for performance and deliver very little benefit visually.

I don't have time right now to do it for you, but there are several ways... Just temporarily set the tween's totalTime(), read the value, then set it back. For example, if you know your click tween has a duration of 1 second, then set the other tween's totalTime() forward by 1, like otherTween.totalTime(otherTween.totalTime() + 1), read the value(s), then set it back so the user will never actually see a jump. Do the math. Your rotation is going at 1 full rotation over the course of 30 seconds, so that's 360 / 30 degrees per second. Calculate what it'd be 1 second in the future that way and plug the values in. I hope that helps!

Welcome to the forums, @theKVD. Here's one approach: https://codepen.io/GreenSock/pen/PoXWypj?editors=0010 You just needed a way to keep track of that timeline instance so you could revert() it. Right?

It looks to me like you're using the wrong end values. You're animating to where the rotating box is NOW (when creating the tween) rather than where it will be by the time the tween's duration completes. So you'd just have to figure out where it will be after that amount of time and animate there.

It looks to me like this line is the problem: $("#nav").css({"top":$("#intro").height()}); You're forcing the initial CSS to be a very specific height there which gets locked into the tween as the "revert" value. Since you're doing a .fromTo() tween anyway, this line of code is completely unnecessary. https://codepen.io/GreenSock/pen/bGOgagp?editors=0010 There's no need for jQuery either, FYI. Nor do you have to create a whole separate tween and ScrollTrigger. Is that what you're looking for?

First of all, nice job on the site. It looks sharp. 👏 It's super difficult to troubleshoot by just looking at a screenshot, and we can't diagnose issues on a live website, but if you'd like more help please make sure you provide a minimal demo. No need to use CodePen - you can use this Next Starter Template Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

That's a much more complicated effect, but it's totally doable. It's beyond the scope of help we can provide for free in these forums, though. Please read the forum guidelines. You'd basically need to figure out where the control points are for the curves and then influence them when they're in a close enough proximity to the pointer. If you'd like to explore paid consulting options, feel free to reach out to us directly or post in the "Jobs & Freelance" forum. Good luck!

You don't need jQuery. Here's how I'd do it: https://codepen.io/GreenSock/pen/rNojYvj?editors=0010 Notice I'm creating a new animation each time because it looks to me like you don't actually want to reverse() the original tween on mouseleave - you want the ease to be "back" in both directions which isn't a true reverse. And you want it to pick up from exactly where it left off in both directions if the user hovers over/off quickly. Is that what you're looking for?

No, there isn't an easy way to do that. Inertia plugin is plotting the appropriate "landing" spot so that it's perfectly on an index number and what you're asking is essentially for it to not ever land and instead have it control the playhead and slow down to match the normal speed, handing control back to the timeline itself at that speed. It's not impossible, but it's way beyond the help we can provide for free in these forums. You're welcome to contact us about paid consulting options. With enough elbow grease, it's probably doable.

I've looked at this for hours, @Loveurope Group LTD and I just don't see any way to consistently work around it. Browsers have major bugs and inconsistencies when it comes to clip paths and transforms (unrelated to GSAP). Frustrating, I know!

You should animate scaleX and scaleY rather than scale (which is like an alias for combining scaleX and scaleY) because under the hood, those are independent. See the docs: https://greensock.com/docs/v3/GSAP/gsap.quickTo() This is part of how we were able to optimize things so much (skipping alias properties). It's like piping values directly into the individual slots.

Are you trying to do this?: https://codepen.io/GreenSock/pen/dywORRK?editors=0010

I noticed several problems: You're scaling WAAAAY too much. First, you're scaling it to literally 100 times the normal size, and then you're scaling it another 30 times bigger. I'm not sure why you're also animating xPercent You're creating a single timeline and then looping through every panel and creating a new ScrollTrigger that's using that same timeline animation. That's logically funky. I'm sure you don't want multiple panels scrolling into view and re-scrubbing the exact same timeline instance. In your demo, you can just create a single timeline and attach a ScrollTrigger to that (just one). Is this more like what you want? If you want the zoom to happen slower, simply adjust your "end" value to be further down. https://codepen.io/GreenSock/pen/zYyKVPP?editors=1010

If you need some help, @Vineeth Achari, please make sure you provide a minimal demo (like a CodePen) that clearly illustrates the problem and tell us exactly how to reproduce the issue and we'd be happy to take a look and answer any GSAP-specific questions.

Just increase the "end" on the ScrollTrigger. Please read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

Actually, CustomEase and Flip used to be members-only tools, but a couple of years ago we moved them to the public/free tier. So I wonder if you're just using a really old trial file somewhere in your project. Can you please explain where you got those files exactly? I bet if you updated to the latest version of GSAP/CustomEase/Flip, it'll resolve that. Again, CustomEase and Flip are NOT members-only benefits anymore.

since the "y" position is changing (not a normal "bounce" in one place), I'd probably break each "bounce" down into its own animation. For example, one tween would animate the "x" with ease: "none" onto each stair. Then for each step, there'd be two "y" tweens - one that goes up with ease: "sine" followed by another that goes down to the next step with ease: "sine.in". Rinse and repeat. Just an idea. Or you could do the motion path thing, but one path for each "jump" onto the next step. Tweak a CustomEase to get it looking just the way you want because it'll basically be the same for every step anyway. Good luck!

You could toss it into a wrapper <div> that you do the animation on instead, sorta like: https://codepen.io/GreenSock/pen/MWZeoQr That seems to work around Safari's rendering bug with the <img> 🤷‍♂️

It's tough to troubleshoot blind, but I think there's something else going on there (unrelated to GSAP) because your call stack mentions an "eval()" method which is NOT anywhere in GSAP. Feel free to search the source code. So I wonder if you've got some kind of build tool that's injecting something weird that's causing problems. I'm totally guessing. 🤷‍♂️

Hi @Jim Tim. This isn't really something SplitText can do - you've got an extremely complicated edge case where you're nesting nodes, doing so within individual words, using archaic <font> tags, etc. and I don't really see a simple fix for you. The underline is disappearing because apparently browsers won't allow them for any elements with display: inline-block (only inline). But browsers won't allow you to apply transforms to elements with display: inline, so it's a bit of a catch-22. So this is beyond the scope of help we can provide in the free forums, but you're welcome to contact us about paid consulting services. We might be able to custom-code something to accommodate the edge cases you're facing there with enough time and effort. I really wish I could think of an easy fix for you. I also noticed that you don't have a Club GreenSock membership, so SplitText isn't available to you outside of CodePen/Stackblitz - do you have membership under a different account?

I don't have much time to dig into this right now, but it looks to me like you never cleaned up this event listener: ScrollTrigger.addEventListener('scrollEnd', () => scrollToOffset(scrub.vars.offset)); So that's still firing on your other page. You should clean that up in your React cleanup function (or your gsap.context() one, either way). https://stackblitz.com/edit/stackblitz-starters-qxh7ya?file=pages%2Findex.js Does that clear things up?

That sounds like something else is problematic in your code. It's impossible to say without a minimal demo and more specifics (what does "everything is broken" mean? and what jumps? and what do you mean that pinned sections are "random"?), but iOS Safari itself has several bugs and Apple has confirmed that it's literally impossible to have the scrolling thread synchronized with the main JavaScript thread which is why normalizeScroll() can be so helpful. I'm not aware of any bugs that would cause the behavior you described but then again, I'm not sure I accurately understand what you're describing. If you still need some help, please provide a minimal demo with as little code as possible (don't include your whole project) and we'd be happy to take a peek.

If I understand you correctly, there isn't actually any delay - it's just that you're using an ease that makes it appear that way. Also, there's no such thing as setting a duration or ease in a timeline's config object. I assume you meant to set a default for child tweens? // BAD gsap.timeline({ yoyo: true, repeat:-1, duration: 0.7, // <-- NOPE! ease: "none" // <-- NOPE! }); // GOOD gsap.timeline({ yoyo: true, repeat:-1, defaults: { // <-- important duration: 0.7, ease: "none" } }) Is this more like what you're looking for? https://codepen.io/GreenSock/pen/JjwXNBv?editors=0010

Ah, okay, that makes sense now. Glad this helped. Yeah, I think you'll dig CustomEase. Have fun!

Oh, that has nothing to do with GSAP - that's probably a CodePen thing. You can probably ignore it.