Cassie

Hi there! This is very layout-y so it's exactly the sort of challenge I'd use FLIP for. https://gsap.com/docs/v3/Plugins/Flip/ However it's made a little more complex by the fact that you're controlling it with a scrubbed scrolltrigger as scrub relies on precalculated values and flip is more dynamic, so you'll need to update those values when the screen resizes. https://codepen.io/GreenSock/pen/WNWKPZO?editors=0110

Hi there, am I correct that the white space only appears during the resize? If so that's just the browser recalculating and adjusting the layout. I wouldn't see that as an issue. The only people that really resize browser windows are developers anyway! From years of bug testing websites and watching user journeys, the average user doesn't resize the browser, and if they do, they certainly don't care what the website looks like during resize. As long as the layout settles and is useable you're a ok.

You haven't linked a demo here so it's hard for me to help I'm afraid. What have you tried?

There's a demos page in the docs too https://gsap.com/demos/?page=1 We're going to add more demos there soon.

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()/

So you've just tried to put a pinned panel inside a pinned panel? You're already pinning the ".video" element, and now you're trying to put that element inside a "panel" element that gets pinned. That's going to conflict. Are you trying to do something like this? https://codepen.io/GreenSock/pen/zYXaMPq?editors=0010 I've added the video panel into the same loop so it gets handled in there. You could pull it out but you'll have to figure out a way to set the correct z-index based on the position in the DOM. (the pens are public now, it might have just been a codepen issue?)

Hey, it looks like the unpkg cdn is having issues today. (it's been down for a while now) FYI - This isn't an issue with the GSAP code, this is the split-type package. This isn't a GSAP plugin. https://unpkg.com/split-type You can find that package on other CDN's though https://www.jsdelivr.com/package/npm/split-type

I added ScrollTrigger.sort() into your pen and it fixes the issue too (also if your pens are private we can't fork them, so if you can make them public that's a big help!) All in all, I think everything here can be solved with ScrollTrigger.sort() and ScrollTrigger.refresh() Hope this helped. Did you have any other questions?

After replying I realised it would likely be easier to just strip the video player out and just focus on the pinning. (this is what I mean by strip it back to the basics) https://codepen.io/GreenSock/pen/QWPxBxX?editors=0010 The issue is likely that the scrolltriggers are being created in a different order than they appear on the page. We can use ScrollTrigger.sort to fix this.

Heya! Yeah it seems like unpkg is down at the moment, you can use the jsdelivr links from our install helper instead https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=true&require=false&trial=true Draggable has an autoscroll property, maybe that's what you're after, from the docs it looks like it should work for any scrollable container https://gsap.com/docs/v3/Plugins/Draggable/autoScroll/

Hi there! There are a lot of questions here and your demo is very involved. The best way to approach stuff like this is to strip things right back, remove react and tailwind and anything that could be causing confusion. Get the basics right, then build it up gradually again. Lets start here. Can you explain what you mean by this? What should be functions? I don't see any hard coded height, other than in the CSS. Your GSAP code is already nice and flexible. You can see that if we add some content into the orange panel rather than a fixed height, the pinning works as expected. If you're adding content in via JS, then it will behave exactly the same, with the small caveat that you'll need to let ScrollTrigger *know* that you've just changed the height. You can do this by calling ScrollTrigger.refresh() I've made a codepen demo as a starting point for you. If you're happy with this part of the question we can look at the video's. It would be very helpful if you could add the videos into this demo for me to show the issue. https://codepen.io/GreenSock/pen/QWPxBxX?editors=1000 This feels like it's likely an issue with the order the ScrollTriggers are being created or called. Which is probably down to React, but let's get this working in codepen first, then when we know that it works and have surfaced any GSAP specific issues or confusion, we can sort it into components and pop it back into react-land.

Yeah I could see why it would be useful if it's a small addition

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

I don't know what you've tried, sorry. If you show me what you've done (fork the demo above with new code) then I can take a look.

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!

Hi there, thanks for your support and sorry to hear you've run into an issue. 💜 I opened this site in safari and used the bookmarks and couldn't recreate this issue at all. It's also very hard (near impossible) for us to debug live sites. Are you using ScrollSmoother? If so, maybe you could find out the exact steps to replicate the issue from the client, then try and see if you can replicate the issue on this codepen? https://cdpn.io/pen/debug/KKXZOyZ If you can we'll look into it. If not then I recommend layering in potentially problematic bits of your code until the issue surfaces so that you can give us a demo and a starting point to work from.

That's a very complex interaction, it would involve a huge amount of knowledge and understanding of WebGL and GSAP. Everyone has to start somewhere though - https://gsap.com/resources/get-started The best way to learn is through making! Give that article a read and try creating something similar. You'll learn a lot in the process.

Good question! I would try like that too, but you're right. It's not working. Paging @GreenSock for feedback on whether it's possible to be set another way or worth adding in a future version.

Hi there! Seems like you may have forgotten to add the main GSAP file? https://gsap.com/docs/v3/Installation/?tab=cdn&module=esm&method=private+registry&tier=free&club=true&require=false&trial=true&plugins=ScrollTrigger Have you included both the script tags found on this page?

Hey, a couple of small issues here One's a little syntax thing, you capitalised DrawSVG in the tween, the other issue is maybe an expectation thing? I've coloured the strokes and fill differently so you can see what DrawSVG does. https://codepen.io/GreenSock/pen/ExJQEYX?editors=1100 Hope this helps

Not always no, it's dependent on your font loading strategy https://stackoverflow.com/questions/25223470/does-domcontentloaded-wait-for-web-fonts-firefox#:~:text=NO%2C it does NOT!,to make it pixel perfect.&text=inside the head (it's called browser preload hints).

Hey, I'm not really sure why this would make a difference unless either the text coming from the backend is dynamically injected later than page load or the class itself is added later? My guess would be that the fonts are loading later and causing a layout shift? maybe... document.fonts.ready.then(function () { ScrollTrigger.refresh() }); If this doesn't help please give us a demo showing the issue. Thanks