Leaderboard

Ha, that is not a good sign! "Keep calm and grap some calming tea", there is probably some server down, if you want to continu working, just grap the CDN files from https://cdn.jsdelivr.net (grap the links via our installer tool) and swap them out in your pen and we're currently looking in to getting the https://unpkg.co packages back in action!

All clear. I'm new to GSAP, so thanks for helping me get up to speed.

No, that isn't really possible to do a nested default value like that. But perhaps in the next release, I could add a ScrollToPlugin.config({ autoKill: true }) method. I don't think anyone has ever requested something like that before. It wouldn't be terribly expensive kb-wise. I assume you'd both vote for this addition?

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.

React creates the DOM tree children first, then parents, so you'd call ScrollTrigger.sort() in the parent component. You can also add numbers to your scrollTriggers with refreshPriority which forces a sort. ✨ https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/

Thank you very much for your help

the issue is basically that the (pinned) video-scrolling is breaking the panel-stacking I've managed to add a video player that has similar behaviour as in my project And it has the same issue (hooray) https://codepen.io/joram-kroon/pen/NWmzLNP?editors=1111 as you can see , after the video, the pane-stacking is not working anymore

Thank you Rodrigo sir for helping me out as well, you made my day ❤️ Edit: If I want to know more, I will ask by starting my own thread.

Thanks mvaneijgen My blood pressure just went through the roof. Bjarne

Never mind; figured it out!

That's not valid - you should pass a ScrollTrigger configuration object to the timeline, not a ScrollTrigger instance itself: // BAD let st = ScrollTrigger.create({...}); gsap.timeline({ scrollTrigger: st }); // GOOD let st = {...}; gsap.timeline({ scrollTrigger: st }); Alternatively, you could do the inverse, where you create the animation and then pass it into the ScrollTrigger.create(): let tl = gsap.timeline(); tl.to(...) .to(...); ScrollTrigger.create({ animation: tl, ... }); Does that clear things up?

Hi there! Thanks for the kind words. Yeah, canvas is usually better for stuff with lots of elements. Pixi is a library that uses canvas so it makes stuff a little easier than using the browser API directly. Your example is pretty simple though so maybe you could just skip pixi and use canvas? Here's a canvas demo that may help https://codepen.io/ninja1pro/pen/abMMOar?editors=1010 And a pixi demo (this is using old GSAP syntax - but it's using pixi to add images so that's helpful) https://codepen.io/Koenie/pen/qBEJVeN The pixi docs are good too https://pixijs.com/8.x/guides/components/sprites

Hey, so you can achieve this with another loop within your current loop. https://codepen.io/GreenSock/pen/LYvrxwd?editors=1010 If that's not the correct order, the easiest way to fix that is to change the order of the items within the SVG, but you could also use array methods in JS to swop the order around. If you need to adjust the timing, you should look into the position parameter. Hope this helps!

Don't pin just the header pin the whole block and move the content inside. Same as the Stackblitz demo. Again everything in GSAP is an animation. Also always make sure you're loading the latest versions of the plugins, your demo loaded version 3.4.0 we're currently at 3.12.5! https://codepen.io/mvaneijgen/pen/MWRXJgM?editors=0010

Thanks Rodrigo, I mistakenly had the autoKill outside of the scrollTo, like this... //DON'T DO THIS// gsap.to(window, { duration: 1, scrollTo: '#anchor' + jumpChapter, autoKill: true }); //DON'T TO THIS//

The ScrollTrigger has a direction property that's 1 if the last scroll was forward, and -1 if it was backward. Sorta like: let tl = gsap.timeline({ scrollTrigger: { scrub: true, ... } }); tl.to(...); tl.add(() => { console.log("direction", tl.scrollTrigger.direction); }); Notice I'm using add() for the callback just because it's a little simpler than call() which is only useful if you're passing parameters (uncommon). Is that what you're looking for? If you're not using a ScrollTrigger at all, there's also a helper function for tracking the direction of an animation: https://gsap.com/docs/v3/HelperFunctions/helpers/trackDirection

You can always try the search in our main forums: https://gsap.com/community/forums/forum/11-gsap/ Although, as with any other search tool, you could get a lot of results based on your search terms. Other option is to search in google using the forums URL as the site parameter. Just type this in the search input on google: scrolltrigger modal site:gsap.com And it'll search for all the indexed results for scrolltrigger modal on our forums. Of course replace scrolltrigger modal with your terms. The demo was made yesterday in the afternoon so is fresh out of the oven 👨‍🍳 🤌 Happy Tweening!

Hi, That's because of the way the Horizontal Loop helper function works, nothing more. The helper function moves a group of items in the direction you tell it to (reversed config option) and when that element reaches the edge of it's parent is move to the opposite side nothing more. Sure enough sounds simple but the logic behind it in order to make it fully responsive and performant is not 😉. https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop With that being said, why are you trying to animate elements in different parents or outside the parent? I fail to see the logic behind it. We have these demos that use the Observer Plugin and ScrollTrigger to change the direction and speed of the loop instance: https://codepen.io/GreenSock/pen/zYaxEKV https://codepen.io/GreenSock/pen/GRwePYw Finally is worth noticing that you have only two elements in your loop, so for obvious reasons there is going to be a jump and empty space when the elements have to be placed at the start again. Is a good idea to have enough elements to use the entire width of the screen ( in large screens of course). Hopefully this clear things up Happy Tweening!

Hi, I think you are overcomplicating this quite a bit. It should be as simple as this: https://codepen.io/GreenSock/pen/zYXWVdw Happy Tweening!

It looks like you weren't doing proper cleanup in React (React 18+ calls useEffect() TWICE in strict mode, so you'd be creating multiple ScrollTriggers, some of which may be applying to elements that no longer exist because React trashed them). So gsap.context() is your best friend in React - it makes cleanup super easy, plus scoping selector text too: https://codesandbox.io/s/pin-using-gsap-in-react-forked-m5ku4c?file=/src/App.js I'd highly recommend reading this article: Happy tweening!

Yes, that is very intentional. In order to correctly accommodate all the advanced functionality of ScrollTrigger (especially pinning), it must essentially tear down any changes it made to the layout, restore the original state of the page and start doing its measurements from the top-down (pinning likely affects positioning of triggers further down on the page). This is an expensive procedure. It would be totally wasteful to force all that work to be done every time the "resize" event fires on the window. Let's say someone resizes their browser to be 300px narrower, for example - the resize event may fire 30 times over the course of that drag, so you'd be having the browser do all that extra work 29 times and slow everything down. Not a good user experience. Therefore, ScrollTrigger waits until at least 200ms elapses since the last "resize" event to fire its .refresh() logic. To answer your question, yes, you could add a "resize" event listener on the window and fire a ScrollTrigger.refresh() manually. But keep in mind the tradeoffs I mentioned above. I certainly wouldn't recommend it. The only people who seem to care about how things look DURING resize are designers. Most typical users don't think that way and would much prefer a better-performing experience during the drag.