trych

Hi there! I have created a timeline that I control via a ScrollTrigger. When I load the page I am right at the beginning of that scroll animation (as in, as soon as I start to scroll, the timeline starts). The ScrollTrigger's onEnter event fires right on page load, but the onStart event does not fire at all, even when I start scrolling. Is this the expected behavior? If so, what is a good way to fire a single event once the scrolling animation has started? Thanks! trych

Ah, of course. I was missing that this was referring to the proxy object. Thanks, works great now! Performance is also good, even without the will-change.

@OSUblake Thanks a lot! Generally this seems to work, but I have the issue that in my setup, it starts blurring on scrolling, but it does not seem to animate back to 0 when I stop. Here is the code that I currently have: let proxy = { blur: 0 }, filterSetter = gsap.quickSetter(".shape", "filter"), // fast clamp = gsap.utils.clamp(0, 40); ScrollTrigger.create({ onUpdate: (self) => { let blur = clamp(self.getVelocity() / -300); if (Math.abs(blur) > Math.abs(proxy.blur)) { proxy.blur = blur; gsap.to(proxy, {filter: "blur(0)", duration: 0.8, ease: "power3", overwrite: true, onUpdate: () => filterSetter("blur(" + proxy.blur + "px)")}); } } }); Any idea if there is something wrong maybe? Thanks a lot!

Hi there! I'm pretty much trying to replicate the linked CodePen from the ScrollTrigger demos, only I want to use filter: blur() instead of skew. Since this has a more complex syntax, is it even possible to use with quickSetter? If so, how? Thanks! trych

@GreenSock thanks a lot for the explanation and the extra tips! Works like a charm!

Hi there! I am trying to animate in an element with a regular `gsap.to()` tween and animate out the same element with a scrolltrigger. There seems to be some sort of conflict that I cannot resolve. I'm pretty sure it is some logic issue, but I cannot figure out what to do. The text should first be invisible, then fade in with the slight shift in the y position and then, when I start scrolling, it should slowly fade out again. The problem is, as soon as I add the ScrollTrigger, the Element will be visible from the very beginning, so it looks like the ScrollTrigger is setting the initial state of the element, when it shouldn't. Any idea what I am doing wrong and how to fix this? Thanks!

Ah yes. That's amazing actually. Thanks a lot, pretty sure I will come back to that function and use it in the future.

@GreenSock ? Wow, thanks so much! This seems exactly like what I am looking for. My project's timeline was yesterday unfortunately and after trying around a lot I ended up using @Cassie's first method. However, when they require some more changes, I might use your helper function (as my project has the circle animation set up as a single timeline now anyways) and even if not, I'm sure this can come in handy for me and others in the future. Only one question though: What does the last parameter do? If I set it to 300px, then how does it act in my setup? Again, thanks so much! This forum truly is amazing.

Thanks, this one looks interesting. The end: "bottom+=100% top" part specifically solves the issue of the breaks. I still would prefer to have the circle animations all in one timeline, but from all the options I had so far, this one seems the simplest. Will give this a try. Thanks again!

Fair enough. I was certainly expecting some amount of fiddling and manual work, I was just hoping, I could find at least a way to sync up certain points of these timelines that run in parallel. I believe you did post my Codepen sketch by accident. Could you edit the link, so I could see the solution you came up with? Thanks!

Ok, this took me forever (because I am both new to Scrolltrigger and Codepen ), but I constructed a minimal demo of what I need. Here we go: https://codepen.io/trych/pen/abJWQby And then here is a demo of the problem that happens when I now want to modify the animation (add some more tweens for example, it gets all out of sync: https://codepen.io/trych/pen/oNZWJLK And I wonder, if this issue could be solved with labels somehow, that the section animate from label to label, but with pinning still happening and under the condition that the animation also keeps animating between the pinnings, as shown in these two sketches. @GreenSock, I hope my issue becomes more clear with the examples?

Yes, you seem to have misunderstood me. At no point do I want to play the timeline independently of the scroll. I am basically after the exact same thing that is shown in @Cassie's first CodePen Sketch above (the one that is based on my initial Codepen). So I also know that the animation itself is not logically impossible, as that Codepen demonstrates the exact animation I am after. The difference to the Codepen sketch you posted is that the circle animations play up to the point where the next pin starts (and don't end with the end of a pin, then pause and continue at the beginning of the next pin). Cassie achieves that behavior by matching the number of sections with the number of Tweens in the timeline. However, when I have now more tweens in my timeline or tweens that are longer than others, I have to manually correct for this (I would basically have to make the scrolltrigger containers larger to match the longer tweens of the circle), if I still want to sections to exactly be in sync. That turned out to be complicated and I would like to avoid that. Hence my idea to drive circle animation from label to label via the scrolltriggers as my code snippet from the previous post shows. However, the scrolltriggers always stop animating the moment they stop the pinning. Then there is a pause until it scrolls down to the start of the next pinned section and then it keeps animating. So there will be a pause in my circle animation between the end of a pinning and the beginning of the next one. I don't want that pause, but basically want to animate the "collecting" or "spreading" or whatever to the point where the next pinning starts (as in Cassie's sketch). However, I don't know how to do that or if there is even a way.

I'm afraid, I'll have to ask again about this issue. Now that I am setting up the actual, much more complex circle animation, I am still trying to figure out the best way to sync up the pinned sections with the circle animations. @Cassie's method of setting them up independently gives a lot of flexibility, but is really tricky to set up once not every tween is conveniently 1 second long: I have to carefully match everything up, insert empty tweens for pauses and even with easier setups there happened lots of mistakes. And once there is a change, I will have to make changes to a few places in my code to have everything in sync again. The method shown by @GreenSock links the circle animations directly to the pinned sections. This would work, but I have two problems with this: I cannot create and maintain my complex circle animation in a single timeline but have to split it up over many Scroll Trigger animations. (more importantly) The animation part is always just happening as long as the pinning is active, then it stops animating until it hits the next pinned section. However – contrary to what I said above –, in some places I need to keep animating the circles even between the pinned sections (meaning in the time between the end of the previous pin and the start of the next pin). This seems not easily possible (I might be wrong though?). To overcome the first issue, I thought I could use a scrolltrigger animation with a pinned section to "drive" a circle animation timeline. So I had something like this: gsap.to(circleAnimationTl, { scrollTrigger: { trigger: mySection, scrub: true, pin: true, start: "top top", end: "+=100%" }, progress: circleAnimationTl.labels["circlesCollected"] / circleAnimationTl.duration() }); While this generally allows me to drive the animation from label to label and would be preferrable, because I can maintain my circle animation timeline as a single, connected timeline, it still suffers from the issue that the animation stops between the pinnings. So I guess, my question comes mostly down to this: Is there are way to have the pinned animation run until the very end, even after the pin is released and until it reaches the next section? Or can I fake this somehow? Or does someone have a different idea for an easier approach to this whole thing? Thank you!

Thanks for the detailed explanation @OSUblake, I will go with overwrite: "auto" in this case then, as I indeed need to avoid this weird stuff, but also have other animations (of other properties) running on the same target.

@GreenSock Wow, thank you so much for the taking the time to walk me through this, this is very appreciated. And very well explained. Although this seems like a somewhat tricky logic issue, I was now able to understand it. Wow, I hadn't even seen the method subpages of the ScrollTrigger plugin docs. ? This is actually a very valuable option for me, as I do have "choppiness" issues when scrolling and using a regular mouse (as opposed to my trackpad), so I will definitively look into this, thank you. In your experience, are these scrolljacking libraries reliable enough to handle all scrolling scenarios? Or do they tend to break on different devices due to their added complexity? While I would love the smoother scrolling, I cannot really risk for the site to not properly work on many devices.

Thank you @Cassie and @OSUblake, this really clears things up for me. @Cassie, in your example do I have to somehow "get rid" the scale-up animation once I start the scale down animation? I realize animaiton-wise it gets overwritten, but is it still somehow active in the background so that it would be beneficial for me to actively remove it somehow?

Hi there! I have assigned some hover effect to some circle, so they scale up when I hover over them. Depending on some boolean value they should occasionally scale down instead. I managed to set this up in a way that the current boolean value is handled on the the first initialisation of each circle's tween. However, if I then switch the flag again, each previously initiated circle keeps the scale value that it was assigned initially, altough I am using repeatRefresh: true. Any idea how I have to set this up differently to have every circle always behave according to the current value of my boolean? Thanks! trych

Thanks again @Cassie, I'm studying the example and I think I understand. Let's say I wanted the animation always to end with each end of the pin (currently they end at the start of the next pin), then I can insert +=1 offsets between the timeline steps, it seems and I will have to add one extra second of nothing to the end of the animation (is there any proper way of doing this, instead of animating the scale from 1 to 1?). According to some quick testing, this seems to work. Too bad, that this will have to be synced up manually somehow, but I will see if I can get this to work. If anyone still knows what the original bug might be all about, I would still be interested to know!

Ok, I looked into this, however, I guess my question still stands: How do I synchronize these two animations in a way that the "collecting" and "spreading" part happen exactly at the right moment when their corresponding sections are pinned (what I have here is a simplified example, I am afraid the real thing will have more sections). @Cassie In your code sample for example the final spreading part of the dots starts before the "spreading" section is pinned. I would like to somehow synchronize these two things as best as possible. Is there a way to do this and to still keep the scrubbing? Do I need to work with durations maybe? If so, how do the durations translate to the scrubbing?

Thanks for looking into this, @Cassie. If I separate these timelines, I guess I would need to have one large timeline for the dots. How could I then make sure that the correct parts are synchronized with the pinned sections and still scrubs along? I thought I have to trigger the dot animations via the section scroll triggers to do that. Is there any other way to achieve this? Thanks! Edit: Aaaah, only realized now that you posted sample code, sorry! Will look into this and then be back.

Hi there, I am fairly new here, but quite exited about gsap. I am working on a page that uses several scroll trigger to handle some pinned sections. All these scroll triggers handle the same set of circles to animate between different positions. I have set this up in a way now that these circles spread over the width of the page in the end. If I scroll slowly, this works fine. However, if I scroll quickly to the end, they all snap to the 50vw x-Position of the page. I don't know why this happens, especially not why this only happens on quick scrolling and works fine on slow scrolling. I also noticed this stops happening when I change the mid section scroll trigger to not use scrubbing, so although this happens in the last section, the issue also seems to be connected to the ScrollTrigger of the previous section. How could I fix this, so that it does not jump anymore and spreads the circles across the page reliably with the last ScrollTrigger? Thanks a lot! trych P.S.: I have read the Most Common ScrollTrigger Mistakes article, but none of the measures that are described here seem to help in my scenario.

Ok, perfect. Thanks for taking the time to explain these basic things to me!

Sorry, for bringing this up once more, @GreenSock and @Shrug ¯\_(ツ)_/¯. While the suggested modular functions would work, I just now discovered gsap.effects in the docs. Maybe I am misunderstanding, but aren't these effects not exactly what I was looking for in the first place? I understand that you can pre-define a specific effect (a specific type of animation) and then at a later point in time use this effect with a certain element. Do I understand this correctly? Or am I mixing something up? Also, would there be any pros or cons in using effects instead of the modular functions mentioned above?

Thanks a lot @Shrug ¯\_(ツ)_/¯ and @GreenSock, your explanations make sense to me and helped me to get a clearer picture of how I can use Tweens and how not. Will prepare a modular function to wrap my Tween constructor and also make use of the template that GreenSock suggested. That's a lot cleaner than what I currently have.

Thanks @tailbreezy and @GreenSock. It seems I have not expressed my issue very clearly. I'll try again. I want to first define a certain Tween, that is not associated with an element yet (not sure if this is even possible) and then at a later point figure out certain elements to associate this tween with and play it (normally or in reverse) on these elements. I need this Tween in different places in my code. Currently I have to define this Tween separately in each of the places where I need it in and I have to define it once forwards, once backwards, so I basically have the definition of almost the same tween like 6 times in my code base. So I was wondering, is there a way to define this tween in one central global place first and then only later associate it with certain elements (and switch certain properties of it, like "this time play it forwards, this time play it in reverse"). Does my issue become more clear now? Thanks!