Amini

Thanks Rodrigo! This actually solved my problem

Hi, I'm trying to make a scroll snap using gsap. I've already proxied the smooth-scrollbar to the scrollTrigger but this is not solving my issue. So the scrollSnap is not working properly (working but having issues) and since you know the smooth-scrollbar scrolls the page using transform and not with overflow. (Uncomment the part and you'll see it explodes) Thanks in advance.

@Cassie Thanks. I don't know why but the scrolling and looping is not working even I did all needed.

@Cassie Thanks but I'm here for spoon feeding

Hi, I'm trying to loop over these images. Like, removing the last image and putting it in the first place. Thanks in advance

Hi, I'm using gsap with vue & vue-router. The problem is when the page loads the first time, it works correctly with no trouble, but whenever I switch to another page using vue-router and go back, all of the animations used along with scrollTrigger is messing up. I tried these settings but weren't helpful. I'm seeking for a solution where I can fix the messing up problem. Maybe there is a way where I can kill and refresh the scrollTrigger as below but my solutions didn't work. data() { return { t: null } }, methods: { scroll() { this.t = gsap.to('.foo', { x: 100, scrollTrigger: '.bar' }) } }, mounted() { this.scroll(); // Nuxt plugins used here this.$ScrollTrigger.refresh(); }, beforeDestroy() { this.t.kill(); // tried this: this.t.kill(null); }

@SteveS @GreenSock Thanks a lot. These were the first steps on how to do it and now I have a better understanding!

Hi, we wanted to create this animation but we exactly have no idea how to do it. I do have some ideas like using clip-path but that is not achievable. Any ideas and roadmaps on how to do it? Much appreciated

@Cassie Yes it did at all. Designer brought up a new problem that it should scroll up and exit from pin after the animation gets finished. In this case it let's me scroll up but the animation finishes later. That is simply because of the duration. Any suggestions?

@Cassie I really appreciate it that you spent your valuable time trying to solve our problem. Unfortunately we didn't read Zach's post carefully so we head to a problem.

I appreciate it @Cassie, I'm afraid to say this wasn't exactly 100% what I wanted. By adding `end: '+=3000px'` it takes more time to finish but then the first tween would take longer to finish. All I want is to customize the speed of elements by adding custom scrub as @ZachSaucier wrote in this article. I'm okay with first tween's speed, but I want the second tween's scroll speed to be a bit slower.

Hi, I tried to use a timeline with scrollTrigger and it worked well. const sections = gsap.utils.toArray('.item2'); gsap.timeline({ scrollTrigger: { trigger: '.wrapper', start: 'center center', pin: true, srub: 1 } }) .to('.item1', { top: 50 }) .to(sections, { x: 50 }) The problem is that there is four items in *sections* which will cause a fast scroll speed on them and makes it look awkward because of the *scrub 1* and I wanted to use *scrub 4* on them. So I changed the code to this. gsap.timeline() .to('.item1', { top: 50, scrollTrigger: { trigger: '.wrapper', scrub: 1, pin: true, start: 'center center' } }) .to(sections, { x: 50, scrollTrigger: { trigger: '.wrapper', // I want to use a custom scrub here scrub: 4, pin: true, start: 'center center' } }) But then another problem occurred which caused the timeline not to be working properly. How do I set a custom scrub on an element without blowing the timeline?

Hi, I'm trying to animate & show the elements two by two whenever the user is scrolling and *do not show them* if the user is not scrolling. I tried to use timeline but wasn't helpful. I appreciate the time you spent reading this.

Hi, I've created scrollTrigger which will be applied on the titles as you can see. The lottie files interactivity working well before reaching the trigger, but it wouldn't play anymore after the scrollTrigger is applied on the trigger `.wrapper`. My purpose is to animate the lottie files the same as the wrapper-child get animated.

Looks like I solved the problem. I had added this line of code which was causing it. * { transition: 0.1s ease all; }

@GSAP Helper Hi again. I was able to deploy it. here is the link to the codesandbox. Thanks for spending your time reading this.

@GSAP Helper Thanks for your valuable time. I will try to provide an example so that would be easier for you.

Hi, recently I asked a question about scrollTriger. We were able to successfully apply it on the page. There is one small issue that whenever the scroll finishes, a white background flashes immediately and goes away. I don't understand what can be the reason. I'm providing the code which will help you. I'm not able to deploy website for now, but I may in few hours or may not. The link for my previous related question. Btw, I'm using vue2. <section class="about-story relative pb-[100px] xl:pb-[300px] mb-[80px] xl:mb-[120px]"> <gallery /> </section> // Inside gallery.vue <div class="story-gallery"> <div class="gallery flex flex-nowrap wrapper"> <div v-for="(img, index) in gallery" :key="index" :class="img.class" class="flex-shrink-0 child-wrap"> <img :src="`/aboutUs/${img.src}.png`" :alt="img.alt" /> </div> </div> </div> gsap.registerPlugin(ScrollTrigger); const sections = gsap.utils.toArray(".child-wrap"); let maxWidth = 0; const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); }; getMaxWidth(); ScrollTrigger.addEventListener("refreshInit", getMaxWidth); gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", scrollTrigger: { trigger: ".wrapper", pin: true, scrub: true, end: () => `+=${maxWidth}`, invalidateOnRefresh: true } }); sections.forEach((sct, i) => { ScrollTrigger.create({ trigger: sct, start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth / 2) * (maxWidth / (maxWidth - window.innerWidth)), end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)), }); });

@akapowl I really appreciate. These were exactly what we wanted.

We're planning on using ScrollTriger in gsap to apply transform in our website. We have some cards which are being transformed. We want these cards to be scrolled to the end horizontally and after the scroll is finished (the last card shows up), so the page scroll moves to the next section and vice versa. We couldn't find a useful resource to apply this and no one knows gsap here. You can find a better example on this website at the bottom of the page which the class name for the cards is .item-extension. While you're reviewing this question, we will be seeking the answer. Thanks in advance