SteveS

I've been loving this combination so far. If someone is looking to combine the two, hopefully, they come across this post.

If you only need the mask to drag then it is fairly simple. I recommend using the GSAP draggable plugin if you can. A custom drag implementation shouldn't be too problematic, but it's more legwork. If you do want morphing, Rodrigo posted some good resources on how to achieve that effect as well using MorphSVG. As long as I'm understanding the desired effect, it should all be possible with GSAP.

I think it should be possible to have a clip-path that is moved by the mouse, but its difficult to intepret exactly what effect you are looking to emulate based off only the two images you provided.

I'm not sure I understand your question or the issue it is rooted in. Could you elaborate?

I think if you want to implement it with more specific animations, my last reply is the best course of action since it will give you granular control over how scrolling moves your elements.

I see. It wasn't snapping, it was just putting in the mouse directed transform. Makes sense.

Not really. I'm not familiar with the method being used. I tried changing the transformOrigin from "50% 50%" to "0% 0%" and it now works correctly on Firefox. I'm not an SVG expert so I don't know why this would be different across browsers, but I do know that the way the SVG is placed into the DOM is strange. It looks like the viewbox is only in the top left but the SVG content takes up the full screen. Is there an article you are basing this off of that I could read?

I'm on Firefox and it looks the same as the Safari video you posted.

To add on, there are more than a few ways to achieve this. Another would be to have both the image and text sections in a larger div and create a timeline that animates the image in, then animates the text up. This would only require one pin and no empty tweens or spacers. A truly ideal solution would not require any extra HTML to be written. I think Cassie's example in the mentioned thread can achieve that, but it didn't work instantly for me so I moved to the other method.

I believe this is what you are looking for: https://codepen.io/StevenStavrakis/pen/XWoeGXE It's not the prettiest solution, but it definitely works. You can read more from this thread: To roughly describe: We create our image section We create a spacer element We make our scrolltrigger such that it scrubs for twice as many pixels as our viewport is tall We make our animation so that half of it is the image scaling and the other half does nothing We set pinSpacing to false When we start scrolling: The image section pins at the top and loses all its height because we didn't put a pin spacer We scroll 100vh, during which our image grows, and our spacer gets moved up the page After the spacer has completely scrolled, we will be halfway through our scrub, and therefore halfway through our animation The second half of the animation is empty, so the section remains pinned as our text comes into view Once the text section is completely within view, we reach 200% of our image section and the pin releases I think this should be the solution you are looking for. @Rodrigo and @Cassie came up with solutions for the original thread, so either might be able to provide more input. I think it would be interesting if instead of making a spacer element we could customize the pin-spacer, but that's not currently possible as I understand.

Yeah, I rectified the issue by adding the mouse movement effect to a wrapping element and then moving the orb in and out of it. Problem solved. I'm still not completely sure what the issue was but it's a fine enough solution.

Yeah, I had to take a break and focus on some other stuff. Life is strange. I considered doing something like this where instead I wrap each "orb" in a container and animate that container. It's not impossible, but it doesn't help me understand what is happening. My basic understanding of FLIP would seem to indicate that it should work. Or, at least, that it shouldn't break specifically in the way it is breaking.

I'm creating a section on a site where when the user clicks on a "bubble" it animates to a different container using FLIP. It works beautifully by itself, but when I apply a hover effect to the bubbles, it instead snaps to the new container instead of animating. I saw this thread which seems somewhat close to the issue I'm having, but I can't really identify what is causing my problem.

The pinned text with images is somewhat simple to achieve and does not require Scrollbar.js If you are talking about smooth scrolling, there is a paid GSAP plugin, ScrollSmoother, that can be used to get smooth scrolling.

Something like this should work: