tobiasger_

Thank you! Worth checking if there are any memory leaks, but I'm not really doing anything too advanced currently. I'm using Nuxt (Vue) and I'm killing all GSAP instances in the components that are using them on beforeDestroy() as recommended. I'm wondering if there is anything with Nuxt and GSAP in combination or something in the way I'm using them together that creates this issue? Right now for example I got the issue I described, where scroll animations are only changing their state after I've stopped the scroll. And checking the console when that happened, I had an error laying there that mentioned something about "invalid component name _Ctor", which seems to be an error you can get when not naming page components in Nuxt correctly. The animation was working flawlessly on initial page load though. So I'm wondering if these occasional errors in Nuxt could be reasons for why the GSAP instance becomes affected, like if it aborts the script in some way? I'll continue to be as meticulous as possible about how I do things in Nuxt and hope that an error free console maybe makes it work better.

I'm building a site that uses GSAP and especially ScrollTrigger for different animations across the site. I have experienced recently that everything works smoothly and without any issues when initially loading the page. I can test it for a few minutes and then I might leave the tab or just bring another application than the browser on top of the browser window for a few minutes. When returning to the site (without refreshing, just going back to the tab or closing the window on top of the browser) it's like the triggers gets delayed quite a bit on scroll which results in a not very smooth experience. It's like the animation ends up on the point where I stop scrolling, hard stopping there and not interpolating in between, instead of following the scrub throughout as it does when I initially load the page. I just wanted to check wether this is a known problem or if there is anything that can be done to prevent it?

Sorry to hijack this thread, but I tried doing this example. However, it seems like the tl.scrollTrigger.direction is only triggering on the way down. I first thought it had to do with the point in the timeline not being detected on the way up when placing it at the end of the timeline. But placing it in the beginning or in the middle doesn't seem to make any difference. If I log tl.scrollTrigger.direction as part of the add() callback, it only outputs a value when scrolling downwards. Any pitfall I've missed?

This is amazing! Thank you so much @Cassie!

I'm trying to create a navigation effect that would show the names of a pages sections fixed at the bottom of the page. Initially all sections except the first one would show at the bottom. On scroll, the sections navigation in the bottom would slide down, leaving only the next section in line visible. When you then reach the next section on scroll, the section navigation item (.section-header--ghost) would latch on to the section being scrolled up from the bottom. The container of all section navigation items (.section-navigations) has overflow: hidden; added to it, so the top navigation item would slide out of the container and the next section in line would slide up. This would create the illusion that you're "latching" onto the sections from the bottom and revealing them as you scroll. The idea would be that the .section-header--ghost would have a solid background, so that the "real" section header (.section-header--real) would appear behind the "ghosts". I've left both the ghost and real headers transparent for this demo though since it might help in understanding what's happening. The way I solve this is that when .section reaches the bottom of the viewport, all the .section-header--ghost elements are moved upwards with the "y" value during 40px, being the height of the headers. So the value gets incremented 40px upwards for each time the scroll reaches a .section maybe this explanation is unnecessary and it becomes easier to understand with the CodePen provided. Problem Everything is working as expected when scrolling downwards. But if I scroll upwards, the .section-header--ghost elements sometimes goes back to 0px, so the movement of the elements are being reset, you could say, instead of the "y" value being decremented by 40px, it gets decremented 40px * total amount of headers. It seems like this problem occurs most of the time, but sometimes when I refresh it works sometimes. Any idea how to do this in a better way or what might be causing it in the current code?

I'm applying a general ScrollTrigger instance over the whole page in order to use onUpdate more on a global level as well as snapping to points in the duration over the whole page. The initialisation of the ScrollTrigger looks like this: ScrollTrigger.create({ start: 0, end: "max", snap: { snapTo: [ 0, 0.07549726145863361, 0.1510521764197175, 0.26145863361199195, 0.3137503603343903, 0.41222254251945806, 0.5044681464398962, 0.5967714038627847, 0.7813202652061113, 0.9474488325165754 ], inertia: false, direction: false, ease: "power1.inOut", duration: {min: 0.2, max: 1}, delay:0 }, onUpdate: self => console.log(self.progress) }); I figured that it would be nice to create a function that returns the array in the snap.snapTo property. I imagine that I can pass an array containing arrays with the timeline for the label and then the label name. And the function would then iterate over all of these timeline/label pairs and push the duration value of each label into the array to be used in snap.snapTo. So a kind of pseudo code example of the function creating a duration value of the label would look something like this: function createDurationPointFromLabel (tl, label) { return tl.scrollTrigger.labelToScroll(label) / < Max value of ScrollTrigger here > } Can I get the max value in pixels somehow from the ScrollTrigger? I can use "max" in the end property, so I assume it would be possible.

§

I understand that it would be helpful with a CodePen for this in order to investigate it in detail, but since this is for a confidential project I'm not really able to share it at the moment. But maybe some general guidelines or tips could be provided given the problem I'm describing? I have a page containing several ScrollTrigger instances where sections are pinned and content within the sections are animated when scrolling through them. The problem I'm experiencing is that somehow the calculation or the initialisation of ScrollTrigger is not working sometimes, resulting in sections closer to the bottom of the total scroll not being functional at all. This is resolved if I "hard update" the page in Chrome (cmd + shift + R), which I think triggers a complete reload of the page and a reset of the cache. If I do this, the whole site is behaving as I want it to. But if I then for example just update the page (cmd + R), most of the times I get this result where sections closer to the bottom is not initialised. I've tried adding: $(document).ready(function () { ScrollTrigger.refresh(true) }); But this doesn't seem to fix it. I get a feeling that GSAP is trying to initialise the page before the DOM is completely loaded. But I'm not sure. I'm not getting any errors in the console. Are there any best practices to make sure that GSAP is initialised after the site is fully loaded? That's at least my hypothesis for a solution currently, as it works as intended when "hard updating" Chrome.

I'm playing around a bit with ScrollTrigger and labels, and I was wondering if it's possible to exclude some labels when using snap: {snapTo: "labels"}? Some labels are more for timing in the animation itself while some would serve a better purpose as snapping points or both. For example, I have one label that is set in the beginning of an animation, while the label set at the end of the animation would make more sense as the snapping point. I know that you can have an array instead of a string for snapTo, what is that array expected to contain?

I'm using an example created by OSUBlake that recreates the functionality of how Apple are animating their Airpods Pro on scroll, but using GSAP and ScrollTrigger. I'm wondering if it's possible to let the sequence run for a few frames, then pause on a specific frame/specific percent of the container that it's triggered by, and then continue for a few frames and pause again in the same manner? I think this really would decrease the amount of images having to be loaded as the sequence I'm testing this code with have a lot of frames that simply are the same, when the object in question is being still for a certain amount of the sequence. If I've understood it correctly, one approach could be to use a Timeline. Are there any examples of how this is done?