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:

Sliders and slideshows are where I learned how difficult web animations can be. With GSAP, it is particularly easy to try and use all of the built in functionality even if it isn't a perfect fit. The benefit of GSAP though is that it is super easy to write your own solutions. First of all, the issue with text remaining is above all else an HTML issue. I tried to debug it, but codepen just isn't the correct environment and your styles are fairly complex. Second, instead of writing all the code you have, it's much easier to write a single function that transitions from x slide to y slide, and then call that on a timed loop. Here is an example I wrote that is much less code than what you have currently. https://codepen.io/StevenStavrakis/pen/MWzmwxo This isn't exactly what you asked for, but it should help quite a bit in progressing your debugging.

I'm not sure I understand the question or the desired effect. From what I think I understand, it looks like you are animating from the default text-shadow to your custom value. To be more precise, when you tween to rgba(255, 158, 158), it starts from some default that happens to be black. A solution to this is to set its starting value to the color and opacity that you want. Here is an example using fromTo instead of to. https://codepen.io/StevenStavrakis/pen/WNYjvKr

1. Set the width of the elements to 100vw instead of relying on static container size. The container is already a flexbox so it will take on the width of its children. Setting the panels to 100vw tells the CSS exactly what you want instead of relying on the style cascade to get it right. 2. If you want to still retain the snapping but don't want it to be so sensitive, you can write a custom snapping function: snap: (val) => { return gsap.utils.snap(1/(sections.length - 1), val) }, Roughly, this takes the natural end scroll as val, and feeds it into the GSAP snap utility function. As it is, if you scroll over halfway to the next slide, it will animate over, otherwise, it will return to its original position.

I'm not a Vue guy, so it is a bit difficult to debug. Looking at the code, I think that what's happening is you are applying your "animateOut" animation to the last element, causing the scrollTrigger to continue past the bottom of the last element.

Looks pretty clean to me. Animating SVGs over DOM elements can sometimes be less performant, but that generally doesn't matter with animations this small.

There isn't enough detail in your post for us to reasonably help. I'm unsure why you need two tweens for this since they execute simultaneously. It seems like this could be accomplished in one `from` tween or `fromTo` tween without issue. One optimization is to use `autoAlpha` instead of `opacity`.

I don't know of anything out of the box. It's kind of a complicated question because scroll implementations vary by browsers and the feature sets are not completely unified. Not to mention that it can be annoyingly difficult to work with scroll in the first place. In the infinite scroll / trackpad scenario, I assume that once the user has stopped their physical motion, the velocity of the page scroll will always decrease. Therefore, we know if a new scroll has been initiated if the velocity of the page on the current tick is greater than on the previous tick. For every tick, or in our case in onChange, we compare the current velocity to the previous velocity and then save it for the next tick. I roughly tried this, and the issue I ran into was that there is an acceleration period for trackpads. It takes several ticks to reach maximum velocity. This causes the system to detect a new scroll multiple times for a single scroll. In the ideal solution, we would observe for velocity increases and then start watching for a decrease to know that the interaction was completed. In a less ideal solution I whipped together just now; we can instead see if the animation is playing and only say there is a new scroll if that is the case. onChange: function(self) { if (animating) return; const currVel = Math.abs(self.velocityY) if (prevVel < currVel) { newScroll = true; console.log(prevVel, currVel, "new scroll"); } prevVel = currVel; }, onDown: () => !animating && newScroll && gotoSection(currentIndex - 1, -1), onUp: () => !animating && newScroll && gotoSection(currentIndex + 1, 1), This works all right compared to the ideal. Not sure how much better you can get with it. I'd figure out the ideal but it's quite a bit of work and might be funky on various devices. https://codepen.io/StevenStavrakis/pen/XWPVMvw

Oh? I guess onDrag only fires when the element itself moves. I figured it would fire when the mouse moved while it is being grabbed. I think this actually solves the issue outright.

Finally coming back to this. Essentially, when using the liveSnap feature configured with a points object, how would one detect a change such that, every time the dragged element snaps, its background color changes? I assume this can be done with a reimplementation of the liveSnap function, but I don't know how to do that. Here is a light demo showing the setup: https://codepen.io/StevenStavrakis/pen/oNPgqgb/f49fd2ba20f512d65a237c86c74b2a4a

Yeah, we need at least the GSAP related code to see what is going on. Without video it's really hard still, but ScrollTrigger issues with reload are fairly regular and fixable.