scartizz

Ah, don't worry, I completely undestand. Unfortunately, I can't reproduce it on codepen as I said. Seems like propblem is really not in GSAP but in third party scripts on the project. Anyway, you guys told me a lot of interesting things and I undestood more about GSAP. Thank you very much!

When I set toggleActions for 'pinned' animation - it doesn't work at all. Animations still has reverse Only ScrollTrigger.disable() helps. But then all animations below get disabled.

By the way, I thought maybe if I stop the animation after it has ended, without the ability to reverse it, it will help. But I couldn't find a safe way to do it. How to prevent animation with PIN from reversing after it ends? Because common toggleActions doesn't work with pin, I guess.

Hello, guys. I tried to reproduce this bug on codepen, but I couldn't. Then I tried to apply all your hints. Non of them helped( Then I found one more option: onLeave: function (self) { let start = self.start; self.scroll(self.start); self.disable(); self.animation.progress(1); ScrollTrigger.refresh(); window.scrollTo(0, start); } In first I thougt this is it! But after ScrollTrigger refresh all the animations below are disabled. To be honest, I can't imagine what the problem could be. Maybe I'm doing something wrong in the first place? I have two separate blocks inside the section, which alternately play their pinned animation. When the first one is played, this block goes up, the second block appears from below and plays its animation. Then also swipe. So I have two timelines for each block: const scrollTriggerCurtainConfig = (trigger) => ({ trigger, start: 'top 10%', end: '+=100%', scrub: .2, pin: trigger, pinSpacing: true, anticipatePin: .3, repeat: false, }) const curtainTimelineOne = gsap.timeline({ scrollTrigger: scrollTriggerCurtainConfig(curtains[0]), }) const curtainTimelineTwo = gsap.timeline({scrollTrigger: scrollTriggerCurtainConfig(curtains[1])}) curtainTimelineOne .to('.about__curtain-anim1', getPos(null, -250, 2)) curtainTimelineTwo .to('.about__curtain-anim2', getPos(null, -250, 2)) That's all... Please ignore encapsulation. This function (getPos) simply moves up element y: -250, with duration: 1.

Sorry, something wrong with codepen, so I can't make an example with scrollTrigger because it just doesn't work now by some reason.. (or I do something wrong). P.S. I don't use any lib or framework. It's simple js/html/css

Hi all! (sorry for google translate) Faced this problem. The landing page has several sections. In some sections, animations are played without a pin. They just start when the scrolltrigger arrives. In other sections, the animations are pinned and going by scroll. The problem is this: if you open the application on a mobile device and scroll up / down, then the screen behaves adequately up to the pinned sections and scrolls without problems. But if you scroll through the sections with pinned animations, and after them try to scroll the screen a little up / down with puases, the screen will jump sharply by a some number of pixels (as if viewport suddenly realizes that in fact, according to the scroll, the screen should be in a different place now) I don’t know how to give an example, because it needs to be shown from a mobile device. But it seems to me that such a problem should be known. But I couldn't find anything on the subject. I recorded a video: https://www.veed.io/view/f576917a-e11a-4eb3-b4f1-cfbda2d0f0c0?sharingWidget=true&panel=share P.S. Fixed header has nothing to do. It's the same without header.

Hey, yes! It seems like I did something wrong when try it. Thank you very much.

Hello everyone! I just got a trivial task: need to change degreee of a linear-gradient. Simply I need to change this (75deg): background: 'linear-gradient(75deg, $red-3-1 -2%, rgba(0,0,0,0));' to this (5%): background: 'linear-gradient(5deg, $red-3-1 -2%, rgba(0,0,0,0));' I'm using a simple scrollTrigger and gsap.timeline().to and I have no Idea how to do it... Please help!