granularclouds

I'm unfamiliar with MorphSVGPlugin, but it'd maybe help if you showed what the Shape1 and Shape2 look like - when I import SVGs like that, there typically isn't a "current" to access - "current" is typically a property on refs. This link might be helpful. You'll also have a higher likelihood of receiving substantive help if you provide a codesandbox link with a demo example of your use-case.

Thanks so much @GreenSock! Your codepen indeed demonstrates almost exactly what I'd want - only I'd change out the "top top" for "center center." Unfortunately - sorry for the little delay in reply, haven't had time to test it out on my end till now - I'm definitely getting stuck porting this to React. Here's my latest sandbox (the code is almost exactly the same as in your codepen.) For some reason I have no difficulty at all pretty much getting horizontal smooth scroll with scrubbing and snapping to work. (The final section in this sandbox). But I've had all kinds of weird problems trying to get something like your linked-to codepen to play nice in React. I'll triple check the common scroll trigger mistakes page and search around for potentially other React x vertical ScrollTrigger posts in the forum, spend some more time in my codesandbox too, but I'd really appreciate any further help getting something like your codepen off the ground in React.

Is there a reason we ought ought scrollerProxy and a dedicated smooth/momentum scroll library over the default scrub: 1 functionality? Blake's Codepen, attached below, seems to provide the functionality I'm looking for - will additional smoothscroll libraries not create a bigger performance hit? https://codepen.io/osublake/pen/89f1e24fbc30e59edbc186a4c961f35c

I've been playing around with ScrollTrigger - what an amazing tool! I've managed to get horizontal scroll working in a variety of contexts, but still very much struggling with vertical momentum scroll for some reason. Here is a codesandbox that hews pretty close to Blake's codepen that was embedded on the first page of this thread (codesandbox because I'm working in React - hopefully it's a pared down enough example to be clear to read). Ultimately my aim is to build a scrollTrigger + momentum version of this - I understand I'll have to remove the position stickies on each individual box and instead make use of pinning and pin spacing - I'll cross that bridge when it comes, though; till then, I'd just like to better understand how to get momentum scroll working like in Blakes codepen above, but in React, and roughly with the HTML in my codesandbox. I'd very much appreciate any help.

Thanks for the reply! And ah! You're absolutely correct. Works fine at 100% (I was zoomed 125% -- on ultrawide right now). Which beta or version do you recommend I upgrade to to resolve this? And I'd like to hear if there are any other possible hiccups in store for me if I continue to use this utils.toArray('.class') pattern while in React, vs the more React-y way of doing things. Still don't quite know how that would be done though, working with an array of refs while only wishing to create a single scrollTrigger.

My aim is to accomplish something close to what's being done here: here I'm satisfied with the simple, non-snapping solution (you can see my implementation here, in the Codesandbox I linked, only comment out the first gsap.to(...) and uncomment the one just below it). But the snapping solution is behaving pretty strangely - it's very, very slow to snap and seems a little confused as to which item/panel to snap to. I take it this is probably an issue with the utils.toArray('.classname') method, and that I ought instead to be using refs, but I don't know how this implementation works, and I haven't found any guidance for doing something like this, which creates scrollTriggers for every single element. My use-case only calls for one scrollTrigger. Any guidance would be super appreciated.