GreenSock

You can't have nested pinning, but you could probably use position: sticky like this: https://codepen.io/GreenSock/pen/MWRoQoV?editors=0010 Is that what you're looking for?

Yeah, a minimal demo will go a very long way toward getting you a solid answer, but it kinda sounds like maybe you are lazy-loading images such that they don't trigger the window's "load" event when they're done (which would fire the ScrollTrigger.refresh()). If that's the case, you need to either call ScrollTrigger.refresh() once your page layout is settled (after images finish loading), or explicitly set the width/height of your images so that there is no shifting of the layout when they finish loading.

I've never heard of anything like that - ScrollTrigger.normalizeScroll() doesn't somehow change the scrolling speed. It uses the data provided by the touchmove events to determine that amount of delta. I wonder if you've got something else interfering. It's super difficult to troubleshoot blind, though. Do you have a minimal demo, like a CodePen or Stackblitz that clearly illustrates the issue?

That's because the browser's getComputedStyle() doesn't return the calc() data properly. So when GSAP gets the starting (from) value, the browser gives it a value with no calc(), and then the end string has calc() in it with multiple numbers. It's the same issue with your other demos (mis-matched data/quantities). There are two solutions: 1) Use CSS variables: https://codepen.io/GreenSock/pen/RwOgRJQ 2) Use a normal .fromTo() tween so that GSAP understands what you're trying to do and can use the raw starting value instead of a computed one from the browser: https://codepen.io/GreenSock/pen/wvZeWXQ?editors=0110

Is the same issue as in your other post - answer is here:

That's because your starting and ending strings have different amounts of numbers and are formatted differently, thus the complex string animation can't function the way you expected. There are two pretty easy solutions: 1) Just make sure the start/end strings have matching formatting and quantity of numbers: https://codepen.io/GreenSock/pen/OJGgXRQ?editors=0010 2) Use a CSS variable to simplify things: https://codepen.io/GreenSock/pen/GRLEqNO Does that clear things up?

A minimal demo will be essential for troubleshooting, but I wanted to point out that I assume this is what you're looking for in terms of the GSAP code: useGSAP(()=>{ gsap.to(group.current.rotation, { y: "+=1", repeat: -1, ease: 'none', repeatRefresh: true, duration: 4 }); }); I'm not familiar with Three.js, but you might need to trigger a render in an onUpdate (if updating the .rotation doesn't automatically render that change)

Nothing has changed about how autoAlpha works. I noticed a few problems in your demo: Your "wrapper" variable was null. You called detail.querySelector(".splitScreenPinning__wrapper") - but that's actually an ancestor of the detail element, so querySelector() won't find it. I assume you meant to use closest()? Since your ScrollTrigger's trigger was null, it was defaulting to the viewport/body, and therefore your start: "top 80%" and end "top 50%" resulted in NEGATIVE start/end scroll positions, so your whole animation was FINISHED at the very top of the page, before scrolling. That's why autoAlpha: 0 was already set. I'm pretty sure you meant to set the trigger to the detail element. https://codepen.io/GreenSock/pen/NWmjJLm?editors=1010 Does that clear things up?

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?