Search the Community
Showing results for tags 'toggleactions'.
Found 2 results
-
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.
-
So I have a website with sections. Some of these have a light background, some a dark. They come from a CMS, so there is no way for me to know beforehand the order of those sections. I also have an element which is fixed on the screen. Now what I would like to do is color the fixed element white when it's over a dark background, and black when it's over a white background. The Pen shows my approach thus far. It works pretty well, toggleActions really takes the brunt of the work. Except when there are multiple dark sections following each other. Then the second, third, ... animation aren't playing. Like the reverse of the previous section cancels out the play from the next. So my question: - Is this the right approach? Or is there a better way to achieve this? - If yes, is there a fix for the issue where repeated sections stop the animation from playing?
