Leaderboard

You are loading tailwind.css via the settings in the HTML section. Without tailwind, the !important statements don't matter at all, it seems. So it looks to me like it is actually more of a tailwind question; and you'll have to find out what tailwind does to your button. To be honest, asking a plumber why the lamp in your living room is flickering, might not be the best approach for seeking help. If you can not find the issue yourself, I'd suggest asking in one of tailwind's support channels, e.g. their discussion forum on GitHub. https://v1.tailwindcss.com/community https://github.com/tailwindlabs/tailwindcss/discussions

Hello there. The documentation has the answers to your questions. 1. You'll want to look for the scroller property. https://gsap.com/docs/v3/Plugins/ScrollTrigger/ 2. No, unfortunatelly it is not possible for ScrollSmoother to have it smoothen the scroll of a different element than the body. https://gsap.com/docs/v3/Plugins/ScrollSmoother/#faqs

No I didn’t because it didn’t work 🙂 But of course I get your point and making it a private repo and a private package is fine which would also solve the problem so thank you.

You can just use a variable to track the open/closed state: https://codepen.io/GreenSock/pen/bGJpzGP?editors=0010 Spam-click as much as you want! 🙂

I get you visually want to snap to the end of the last horizontal section, but that is the same as snapping to the "this is the last section", so that is where I would align the snapes. Same ast he frist section, snap the end and start. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaEKYmy?editors=0010

Thanks Rodirigo, the percentage info helped solve my problem for why the second instance wasn't working properly. Thank you so much!

Love the plumber analogy @akapowl, your post earned a Gif!

Hi @Cossetteqc and welcome to the GSAP Forums! Sorry about the delay but we also need some rest and leisure in our lives, considering that you posted on a Saturday afternoon, thanks for understanding and for your patience. I just created a new SvelteKit app in my local machine and used this approach without any issues: import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } I even ran the lint, check and build commands without any issues and my build preview is working as expected. Can you create a minimal demo in Stackblitz that clearly illustrates the issue. Here is a simple demo that uses ScrollTrigger: https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6 Hopefully this helps. Happy Tweening!

@mvaneijgen Your solution in the other post really worked. Thank you very much ❤️

Hi @Babken10 welcome to the forum! Be sure to always use the latest version of GSAP, also TimelineMax hasn't been use since version 2 we are currently at version 3.12.5! If you're following some old guide check out this awesome getting started guide https://gsap.com/resources/get-started/ I've moved your label to be in the middle of each animation eg when the item is visible. Then in your .hover() function I get the element that is being hovered, gets its data-c number and feed that to the GSAP .seek() function, so now when you hover each part it seeks directly to that step and pauses the timeline. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/xxeVzLW?editors=1011

Thanks again for the quick response. I found a solution for infinity)) have a nice day!

Check out my post how to create a card stacking effect. It shows how you can create one timeline with one ScrollTrigger to control an animation. I would then also add your nav bar to the animation and don't fiddle with adding or removing classes, just add everything to one big animation. When working with ScrollTrigger I would never use position: sticky. When you want to stick something use pin: true, in the ScrollTrigger settings I would advise you to take a look at my post and first just focus on the animation, remove everything to do with ScrollTrigger and just focus on the flow you want to happen. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ you'll probably want to use the position parameter when creating the animation. You can of course go the route you're doing, but you'll then will need another 500 lines of code to fixes everything and figure out every edge case. Working with one timeline will be so much more simple. Hope it helps and happy tweening!

You could think of it that way, yes. But position: sticky has limitations that ScrollTrigger's pinning doesn't. If it works in your particular scenario, great! Use it.

Have you tried ScrollTrigger.normalizeScroll(true)? Or you could use ScrollSmoother. The fundamental problem is that most modern browsers handle scrolling on a completely different thread (not synchronized with the JavaScript thread). So imagine scrolling quickly, such that on the very next tick the page would be 100px higher. The scrolling thread says "okay, I'm gonna render the page 100px higher" (and it does so), and then a few milliseconds later, the main JS thread executes and ScrollTrigger does its thing, saying "alright, now we've passed where that element should be pinned, so let me pin it..." and now you see that element correct itself to be pinned in the proper place. It's not as if it's a bug in ScrollTrigger or anything - it's a fundamental problem with how browsers do scrolling on a different thread and pre-render those scrolling results BEFORE the JavaScript executes. So if you see a site where that doesn't happen, it's almost surely because it is PREVENTING the native scroll, and it's doing EVERYTHING (including scroll) on the main thread. It listens for wheel/touchmove events in a non-passive way and calls preventDefault() on them, and then does the actual scroll via JavaScript instead. That's what ScrollTrigger.normalizeScroll(true) does, and ScrollSmoother of course.

Would something like this work? I've created a gsap.delayedCall() https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/ and a function for your batch, so now on page load it waits 3 seconds, but all the future batches play instantly. https://codepen.io/mvaneijgen/pen/qBwZZwv?editors=0010

If you make your clickable elements elements that are recognized as clickable elements (eg button, which is also better of accessibility) you can set dragClickables: false, and everything works as expected You can also create your own clickableTest This is all from the docs, so be sure to read through it once, just to get familiar with everything that is possible out of the box. Hope it helps and happy tweening! https://gsap.com/docs/v3/Plugins/Draggable/ https://codepen.io/mvaneijgen/pen/mdgVoEr

Yeah, the "target" is telling it which element's scroll to normalize. Typically that's the document.scrollingElement (body or html). So yeah, if you target a sub-element, it just normalizes that. Yes, that was intentional because I honestly didn't think anyone would ever need this feature but I baked it in anyway just in case, but I didn't document it because I wanted to see if anyone would ever even need it. If enough time went by and nobody did, we could consider safely removing it. 🙂 Glad it's fixed now!

Hi @Fat Pixel welcome to the forum and thanks for being a Club Greensock member ? I've inspected the original a demo bit, and it seems like they are really scrolling the page (or scrolling something) because the image really stops if it's at the bottom. That was also my original idea, because you want to have the 'feel' of just scrolling, so why not scrolling? So the direction below is really flipped on its head of your original example. I use the scrollToPlugin to just scroll the page to the bottom and then use the Observer plugin to check if the visitor is scrolling. If they are I kill the original animation and start a new one when they stop. I also check in what direction they are scrolling and change the direction of the animation. The only thing I've not done is calculate the duration based on where the scrollbar is now, so it becomes really slow when you already far down the page. https://codepen.io/mvaneijgen/pen/ExGQaez?editors=0010 If this is not the route you want to go down I was also thinking of creating a infinite looping container, so that you can really move the images what ever amount to get it closer to feeling like real scrolling, because I think that is holding back your original demo, the scrolling feels limited and the fun comes from really throwing the images around. The Seamlessly loop elements along the x-axis should be helpful if you want that. Hoop dat het helpt en veel geluk!