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 !