mrgreen

Hi, I have a couple of scoll triggered animations working with scrub and some scroll triggered animations that work without scrub at a normal animation velocity determined with durations. My issue is that when users scroll on mobile or with trackpad, they often flick the scroll a bit and that uses scroll inertia that goes very fast through the animation so it skips a lot of the page. Is there any way to disable scroll inertia? To have users scroll down in normal velocity only when their fingers are touching the scroll without any increased momentum when they flick the scroll.

That solved it, thanks a lot!

Hi, is there a way of resetting all scroll triggers when the page is refreshed? I have multiple triggers and animations happening and I don't want users to arrive to the same state/progress they left in when refreshing, is there any way of having them load the page from the beginning like what happens when a hard refresh is done?

Hi, I wanted to ask what the best approach is when having a container (with "position: absolute") that has content inside which is longer than the viewport on mobile and requires the user to scroll. Does ScollTrigger automatically detect that the container requires the user to scroll and does it allow it without clashing with the actual trigger progression? I tried using "height: 100%; overflow-y: scroll;" for the container but the scrolling of the container clashes with the scrolling progression of ScrollTrigger.

Was an issue of toggleActions, used toggleActions: "play reset resume reset" to reset the animation onLeave so that it doesn't overlap with the next trigger

Hi, I'm having an issue with an animation timeline which doesn't have scrub applied to it as it needs to play at normal velocity when triggered, whilst the previous trigger and the next have scrub applied to them. Basically what happens is that if you scroll fast from a triggered timeline which has scrub applied, to one which doesn't, it might skip it and have the animation without a scrub overlap into the next animation. Is there anything I can do to prevent this? The scrubbed animations work well because they follow the scroll velocity, however when I have an animation without scrub and it's triggered I would need for the user to wait a couple of seconds before scrolling so that the animation completes or else it will continue playing while overlapping into the next trigger. Is there perhaps some way I can set a duration or specific time before the user can continue scrolling to the next trigger? var zoomInTl = gsap.timeline({}); ScrollTrigger.create({ animation: zoomInTl, trigger: ".hero", start: "top top", end: "100%", scrub: true, markers: true }); zoomInTl.to(".hero-container", 1.8, { x: '+=150%', y: '-=10%', scale: 10, ease: "none" }) ; var offerLeftTl = gsap.timeline({}); ScrollTrigger.create({ animation: offerLeftTl, trigger: ".offer-container-left", start: "bottom top", endTrigger: ".offer-container-right", end: "100%", markers: true, toggleActions: "play none none reset" }); offerLeftTl.to(".offer-container-left", 0.5, { autoAlpha: 1, ease: "power1.out"}) .from(".offer-container-left .offer-decoration", 1.5, { y:'-=50%', transformOrigin:"55% 0%", autoAlpha: 0, ease: "elastic.out(0.8, 0.3)" }, '-=1.2') .fromTo(".offer-container-left .offer-decoration", 1.8, { rotation:-3, transformOrigin:"55% 0%" }, { rotation: 3, repeat: -1, yoyo: true, transformOrigin:"55% 0%", ease: "sine.inOut" }, '-=0.24') ; var zoomOutTl = gsap.timeline({}); ScrollTrigger.create({ animation: zoomOutTl, trigger: ".offer-container-right", start: "150%", end: "250%", markers: true, scrub: true }); zoomOutTl.to(".offer-container-left", 0.5, { autoAlpha: 0, ease: "power1.out"}) .to(".hero-container", 1.8, { x:'-=150%', y:'+=10%', scale: 2, ease: "none" }) ;

Thanks a lot for your help! Noted all your remarks and thanks for pointing those issues out.

Hi, I'm currently working on an animated landing page based on scroll triggered animations. I have a 'hero section' which has elements animating within it (tree, decorations, etc), these need to animate while the 'hero section' remains pinned while the user scrolls to progress through the animations. My issue is that I cannot scroll when hovering over the hero section when it's pinned and for some reason the container is having "top: 172px" added to it. Somehow the scroll works well when scrolling on that additional grey area (which I don't intend to have as I want the hero section in full height), and the scroll on the hero section doesn't work. I tried adding "z-index: -1" to the hero section and started the pinning trigger at "start: top -20%" then it works as a workaround (source: "https://codepen.io/stevencamilleri-mrg/full/MWvXVNB"), however with that the button inside the content will not remain clickable anymore. Can anyone look into what I might be doing wrong? The idea is to have the user zoom in/out the tree with different content and decorations showing up. PS. I would suggest viewing in full view on Codepen in desktop