GreenSock

That looks like all React-related logic. You were adding a .from() animation to the timeline that targets usernameFormRef.current...but at the end of the previous tween you're calling setJoined() which triggers a re-render of the component, so that element that you were tweening with the from() tween no longer exists! It was replaced by React with something else or removed altogether. When you setJoined(), React takes a little time to actually create/render the new state, so you have to wait for React to finish that before you can actually animate what it creates. That's the perfect case for a useGSAP() with a dependencies Array - it'll get triggered as soon as a dependency changes and is rendered. You created your timeline instance outside of any context, therefore it won't get reverted or cleaned up properly. You don't really need to set a scope if you're never using any selector text, just so you know. It doesn't hurt anything, of course. It's just that it is only useful for selector text. Are you trying to do this?: https://stackblitz.com/edit/nextjs-7ex2g3?file=app%2Fcomponents%2FControls.tsx

Here's a great article from @PointC: https://www.motiontricks.com/svg-dashed-line-animation/ And yes, absolutely, GSAP's DrawSVGPlugin is great for that kind of thing. You'll need a Club GSAP membership. https://gsap.com/pricing

I don't see any of that code in your demo. Am I missing something? Like Cassie said, you're asking GSAP to tween that image.src attribute which doesn't make any sense here. GSAP is doing what you're asking it to do - finding the numbers in that attribute string and animating between those, but of course that's not what you want. Why are you even setting a duration there - what exactly are you expecting to happen over the course of 1 second? You can certainly use a .set() to just set the attribute to a new value. It just doesn't make any sense to tween that. If you still need help, please make sure you post a minimal demo (like a CodePen) that clearly illustrates the issue and we'd be happy to answer any GSAP-specific questions.

Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out, and also demonstrated how you can make the bee kinda twist itself to remain oriented in the direction it's moving using scaleX and scaleY: https://codepen.io/GreenSock/pen/mdgmawg?editors=0010 Notice that pathEase() helper function has been updated and you can pass in a config object with smooth: true. I hope that helps!

I read that a few times and I'm still fuzzy about what exactly you're trying to do. Can you clarify and make sure you include a minimal demo that clearly illustrates the issue regarding the image?

If I'm understanding you correctly, you actually want to create an entirely different path that is visually in the "middle" of the outlines, right? That's definitely not something DrawSVGPlugin can do for you. You'll need to create the SVG path in the proper way. Asset creation is the key here, as @PointC shows in his articles. Once you have the path, DrawSVGPlugin will easily animate it. ✅

@Kopano Segano it's super difficult to troubleshoot by just looking at screenshots of your code, but my best guess is that your script.js file isn't loading because maybe you don't have the path correct there. I'm totally guessing. I have no idea where you script.js file is in relation to your index.html file. If it's in the same directory, try removing the "./" from in front of it, like <script src="script.js"></script>. And of course it'd be useful to see what you actually have inside that script.js file. This is why we really need a minimal demo in order to troubleshoot here (like a CodePen or Stackblitz or even a link to your faulty page).

That's typically beyond the scope of help we can provide here, but as a courtesy I tweaked the helper function to accommodate new enterAnimation and leaveAnimation functions that you can use to return an animation which gets plugged into the timeline: https://codepen.io/GreenSock/pen/qBwmOex?editors=0010 Does that help?

I didn't have a lot of time to look at this, but it appears to me as though you were creating the ScrollTriggers in the wrong order. You should always create them in the order they appear on the page, -OR- you can set a refreshPriority on them instead so that you can make sure things get refreshed in the proper order. I added a ScrollTrigger.sort() at the end in order to force them to get ordered by their start position: https://codepen.io/GreenSock/pen/XWQRmmb?editors=0010 Also, this is not a good idea: transform: "translateY(100%)" It's much cleaner, faster, and more efficient to do this: yPercent: 100 Does that clear things up?

Make sure you're setting the "scroller" property on your ScrollTrigger properly. By default, it uses the main window/viewport, but it looks like you're trying to use a custom scroller, so you must set that property on the ScrollTrigger so that it knows which scroller to watch. A minimal demo that clearly illustrates the issue will go a LONG way toward getting you a good answer. 🙂

Oh, and one more note - I have seen a Chrome rendering bug (unrelated to GSAP) that basically caused elements not to render at the proper time when the containing element is very large/wide. It's as if Chrome busted things up into tiles internally for rendering purposes (think of maybe 2000px max wide) and then miscalculated when the next tile should get rendered. So maybe you're running into that. I hope they fix it soon.

First of all, thanks for being a Club GSAP member, @Bielke and Yang 💚 It's super difficult for us to know what might be causing that without seeing a minimal demo, like a CodePen or Stackblitz. My guess is that maybe you're running the helper function logic BEFORE your images are fully loaded and so they're actually resizing when they load and shifting the layout, throwing off the calculations. Make sure your layout is settled before you run those calculations. Or you could set the height/width in the CSS/markup ahead of time so that loading doesn't affect it. Otherwise, if you're still having trouble please post a minimal demo illustrating the issue and we'd be happy to take a peek.

If you'd like some help beyond @Cassie's excellent advice, please make sure you provide a minimal demo and be more specific about what exactly is going wrong. You said "...inadvertently disrupted other animations..." but I have no idea what that means exactly. And "scrolling behavior became erratic" and "...unusual behavior even within the parallax feature...", but when I tested in the original demo you provided, I saw no problems whatsoever on my iOS device. What happened exactly and how can we reproduce it on our end? You might also want to try this in addition to the normalizeScroll(true) option: ScrollTrigger.config({ ignoreMobileResize: true }); And are you using the latest version of all the files?

I don't have time to look right now on my phone, but that sounds like the classic problem of the browser using a different thread for scrolling than the main JS thread. Have you tried adding this?: ScrollTrigger.normalizeScroll(true); Or you could apply scroll smoothing to force the scroll to be done on the JS thread, like ScrollSmoother with a small amount of smoothTouch.

We don't typically provide custom solutions like this in these free forums, but I was curious about this and decided to clean up your demo for you: https://codepen.io/GreenSock/pen/GRLWvGp?editors=0010 I assume that was what you're looking for, right? You just had various logic issues and overcomplicated things a bit in my opinion. 🙂 I hope that helps!

I'm not exactly sure what you mean, but obviously if you resize it would mess with the proportions; if you're trying to keep the expanded state kinda snapping there after resizing, you could do something like: https://codepen.io/GreenSock/pen/BaEWZpM?editors=0010 This is really beyond the scope of help we can typically provide in these free forums (lots of custom logic), but hopefully this gets you going in the right direction.

That's because in your Header.tsx file, you're creating a local variable for innerWidth like this: const { innerHeight, innerWidth } = window; So that gets set initially when that function runs, but then when you resize the window, you never updated that value, so it's using the original amount, throwing off the end. In your other file, you're referencing window.innerWidth directly. So you end up with two different values - one that's updated with the new window size, and the other that uses a stale value. Just use window.innerWidth in BOTH places: // BAD end: () => "+=" + innerWidth, // GOOD end: () => "+=" + window.innerWidth, Does that clear things up?

change = window.innerWidth * (expanded ? 0.25 : -0.25), You were going from 50vw to 25vw (or the other way), thus that's the same as window.innerWidth * 0.25 or -0.25. movement = containerInner.offsetWidth - window.innerWidth, That's the total distance it's moving. progress = st.progress * 1 / ((movement + change) / movement); This just maps the current progress value (0 is the very start, 1 is the very end, 0.5 is halfway through) to the corresponding progress value with the change factored in. The entire goal here is to make it seamless. Let's say it's at exactly 50% progress (0.5) and then you expand the whole thing 500px to the right, well now the current position would no longer be at 50% into that entire move. It'd less than that. So it's just figuring out the proportions. st.scroll(st.start + (st.end - st.start) * progress); This just scrolls to the correct position to make it appear seamless.

No problem! This is the place to come when you have a question. It's totally fine that you're new to GSAP and trying to learn. Welcome! ScrollTrigger automatically handles resize events (and throttles them for performance). If you want a different animation for mobile devices, you might want to check out gsap.matchMedia() Instead of setting up your own "resize" handler where you keep doing the calculations on every resize, I'd recommend using a function-based value that calculates it only when you need it, like: const getVideoContainerOffset = () => window.pageYOffset + videoContainer.getBoundingClientRect().top; // in your ScrollTrigger: start: () => "top " + getVideoContainerOffset() + "px", No, I would not have a backdrop-filter. I'm saying you literally create a copy of the image that is blurred in something like Photoshop (or whatever), and save that as an image and place it directly on top or behind the normal image and then cross-fade them to make it look as if the normal image is becoming blurry (but it's just a crossfade - nothing is happening with filters). The entire goal here is to save the browser from having to do all the blurring calculations. I don't have an example off the top of my head to show you, but hopefully the concept is very simple to grasp and you can give it a shot. My guess is that you had a transform applied via CSS and that was getting parsed in as such. So it's fine to set that value in the "from" part of the tween, or initially using a .set(). It's difficult to offer advice when we don't have a minimal demo (CodePen or Stackblitz) to look at. One of those will go a long way toward getting you solid help. Good luck!

A few things: Why are you calculating the offsets on every single update of the ScrollTrigger? That seems very wasteful. onUpdate: calculateOffsets, // <-- remove this? Maybe you intended that to run onRefreshInit or onRefresh? You can't have scrub and toggleActions - those are mutually exclusive. You can remove the toggleActions if you have a scrub. There's no point in having rotation, perspective, or skewX in your tween because you're not animating those at all. Filters are TERRIBLE for performance, just so you know. It's totally unrelated to GSAP. It's just that browsers have a tough time rendering them. You might want to try adding will-change: transform on anything you're animating (I saw you only had it set to filter on that image). One trick is to create a blurred version of the image (like in Photoshop), and then just crossfade that blurred version with the non-blurred version. That'll be WAY cheaper for the browser to render.

I'm not sure if I understand you correctly, but maybe you wanted this?: https://codepen.io/GreenSock/pen/qBwRgXZ (just add some conditional logic to make the first one active initially)

Yep, because if we combine them all into a single tween, there's only one transform render that must occur on each tick (that's the part where the transforms get combined into a string and applied to the style). Just a small performance optimization that you'd likely never even notice in real-world scenarios but I obsess about performance. You had to create a new tween anyway on each update, so might as well just combine the x/y into that rotation one.

Yeah, it's super hard to troubleshoot a live site - a minimal demo like in CodePen or Stackblitz is best. My guess is that even if you completely remove ScrollTrigger from the equation, crack open Dev Tools and you'll see that the computed height of that <main> element is indeed 0. The visible content may just be due to the fact that overflow is visible on that element. In short, I bet the issue has nothing to do with ScrollTrigger, but it's in your CSS/layout. Once you post a minimal demo for us to investigate, we'll be able to advise further.

@bellaz do you have a minimal demo that illustrates the issue? That'd go a long way toward getting you a good answer. My guess is that maybe you want something like this?: https://codepen.io/GreenSock/pen/VwNPqjO?editors=1010 Notice I'm just checking to see if the pointer moved more than 3 pixels in either direction, in which case I call preventDefault() on the event to make sure the click doesn't happen.

I read that a few times but I still don't understand what you mean. Can you provide a minimal demo that illustrates the problem? Hm, that also sounds odd to me. Why would appendChild() fail? Again, a demo that illustrates the problem would be super duper amazingly helpful. 🙂