oligsap

Thanks a lot @Rodrigo this solved my problem !

Hello there, I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here. Anyway I'm opened to suggestions, thanks for your help folks Olivier

I wanted to add to the solution that when you scroll back up you can't just do .progress(0). You also need to reverse the scrolltriggers array because you may get styles added from timelines tweening values after the previous one. Full code here : _this.previousScroll = window.scrollY; window.lenis.scrollTo( href, { immediate: true, onComplete() { let scrollTriggers = ScrollTrigger.getAll(); if (_this.previousScroll > window.scrollY) { scrollTriggers = scrollTriggers.reverse(); } scrollTriggers.forEach((st) => { if (st.animation) { if (window.scrollY > st.start) { st.animation.progress(1); } else { st.animation.progress(0); } } }); _this.previousScroll = window.scrollY; } } );

Ok solved : Deleted `refreshPriority` and added condition if window.scrollY > scrolltrigger instance then go to end of animation with .progress(1)

Hi @GreenSock, I'm sorry I was in a rush and needed first insights. I now have a demo running : https://codepen.io/olig/pen/ExdXwJa You'll see that when you click on "References" and scroll back up, all the styles are mixed up. But when you scroll down as usual all the styles apply and at the end you only have one screen left before the section references appear. I tried killing the tweens but that doesn't work either. Thanks for your help

Hi everyone, I'm using Lenis smoothscroll and I have lots of scrollTrigger timelines that are triggered with toggleAction and scrub. They work fine when I wheel scroll down my page but when I click on an anchor to immediately go to my section, previous timelines do not finish properly, I have styles that are not added/removed only on the ones triggered with toggleAction. I tried forcing the animations to the end like below, but that doesn't work. document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener('click', (e) => { e.preventDefault(); const href = anchor.getAttribute('href'); if (href === '#') { return; } window.lenis.scrollTo( href, { immediate: true, onComplete() { const scrollTriggers = ScrollTrigger.getAll(); scrollTriggers.forEach((st) => { if (st.animation) { st.animation.progress(1); } }); } } ); }); }); What am I doing wrong here ? Thanks for your help.

For anyone coming across this post. One solution is discussed here :

Hi Jack @GreenSock, yes that's exactly what I wanted. Thank you very much. I'm confused, I really thought the snap breakpoints had to go from 0 to 1. It's written no where in the docs that breakpoints can be higher than 1. I thought the snap was related to the progress of the scrolltrigger tween and I can't understand the math and what it is in relation with. Can you point this out please ? Thank you Olivier

Hi, I'm having trouble getting scrolltrigger snap to work. I understand when you have div/sections that are the same width/height that its 1 / total - 1. But what happens when the sections are not the same width. I made a codepen to illustrate how I think it works building an array of snap points - obviously I'm wrong but I can't figure out why. Help appreciated. Thanks !

I'm sorry Cassie what codepen exactly is the solution ?

Hi Jack @GreenSock, Did a codepen to illustrate the fact that the snippet above doesn't work with strong tags : https://codepen.io/olig/pen/yLKGjym

Hi everyone ! I'm having a hard time simply moving a slider into a lightbox with the Flip plugin. All the examples given seem so easy but I must be missing something because the result if somewhat pecular... Thanks for your help

Hi @akapowl ! I'm trying to do the same thing now but with toggleClass. I've just modified the demo for buttons to toggle from red (not in viewport) to green (in viewport) but it doesn't work. What am I missing out here ? https://codepen.io/olig/pen/VwjYZLw Thanks a lot

OMG ! You're right thank you very much !

Hi, I have a horizontal scroll using the Smooth-scrollbar library. I'm trying to do a simple rotation on a square by using GSAP ScrollTrigger's proxy but I can't get it to work. What am I missing out here ? As always thanks a lot for your help !

Awesome thanks

Hi Paul, Thanks for the help, it solved my problem. Sorry for that I'll check into these mistakes, I didn't even know I was making one. Cheers

Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help

@ZachSaucier Could we do the same with the kill function ? like trigger.kill(false); ?

Hi @mikel, @ZachSaucier, Thank you very much for your feedbacks. It helped me a lot to get where I wanted to go !

Hi everyone, I've managed to animate text on an SVG path but I can't manage to make the animated text arrive in the center of the screen when the snap stops. It either stops before or after the center. I'd tried to mess with the snapTo without success. Thanks for your help

Makes perfect sense. I just forked the Horizontal snapping demo that has the same logic : https://codepen.io/GreenSock/pen/YzygYvM In the demo, elements offscreen are still animated.

Hi there ! I have a horizontal scroll in place with Scrolltrigger. I was wondering if it was possible to disable animating elements when they're out of the viewport for performance matter ? Juste like Locomotive scroll : https://locomotivemtl.github.io/locomotive-scroll/ Thanks for your feedback

Ok so I think I managed to solve it - like this : https://codepen.io/olig/pen/GRZORvX Code: const sections = gsap.utils.toArray("section"); let maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", scrollTrigger: { trigger: ".wrapper", pin: true, scrub: 1, end: () => `+=${maxWidth}` } }); I'm not really sure if my code is optimized so critics welcomed !

I would be interested in knowing how you fixed this. Thanks !