Cassie

(Ah, just realised which one you were after, sorry I thought you were talking about the get GSAP button on the install page) I'll get the other one popped in a codepen too.

Here's a simplified example! https://codepen.io/GreenSock/pen/MWRrBqQ?editors=0010 Although the one on the site actually uses a timeline and calls invalidate each time so that the random values get refreshed. I'll see if I can extract it into a codepen 👀

We're back up again everyone! Thanks for bearing with us through this outage. 💚 We appreciate you all!

We're back up again everyone! Thanks for bearing with us through this outage. 💚 We appreciate you all!

We're back up again everyone! Thanks for bearing with us through this outage. 💚

Another workaround is to temporarily allow insecure connections: `npm config set strict-ssl false`.

I'm aware it's more complex if you've got pipelines set up, but the .tgz route is fail safe while we wait for this to be solved. Just drop the .tgz file in the root of the project and run npm install ./gsap-bonus.tgz https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=zip&tier=free&club=true&require=false&trial=true

We're incredibly sorry for the inconvenience. We're waiting on the hosting provider for a fix at the moment, I'm afraid I can't give an estimate right now.

Hi there, yes it's down to our SSR cert. We're working on a fix, In the interim you can use the Zip file to access the club files. Thanks for your patience and support 🙏

We're aware and currently working on a fix! Apologies for the inconvenience and thanks for your patience. In the interim you can use the zip file to access Club Plugins https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=zip&tier=free&club=true&require=false&trial=true

We're working on a fix currently. Afraid I don't have a solid estimation for you. ASAP

Hi there, thanks for the heads up. There's an issue with our SSL cert I'm afraid. I've contacted @Prasanna who handles our private repo and we'll keep this thread updated. In the interim you can use the zip install to access the files. So sorry everyone. Hold tight! https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=zip&tier=free&club=true&require=false&trial=true

@akapowl - Would you be able to chime in here? - I can't see the issue, I don't have a windows machine https://issues.chromium.org/issues/40240236

Commented on that thread again! 🫠

A position: sticky header will behave as relative until scrolled and "stuck" to the top of the screen, then it behaves as fixed. So the content will sit underneath the header and then scroll underneath. If you don't want the content to sit underneath and then scroll, just make the header position fixed- then the content starts off in the right position, no need to use JS to fix anything.

Hi there! Our React docs are a good place to start. There's everything you need to know there in order to port the animation over to react https://gsap.com/resources/React/ If you need specific help, pop back with a demo showing what you've tried.

Also, just a heads up but safari is really struggling recently to paint big changes like this. I tried a few weeks ago and whole sections of the page were chunked out on scroll 🫠 I'd suggest using fixed divs and doing opacity fades instead of targeting background color. https://codepen.io/cassie-codes/pen/YzMVRrr/4a679cfaa6f8a96bd83bceaea0fa01b4?editors=1010

Here's a simple code example of invalidateOnRefresh gsap.to(".el", { xPercent: () => window.innerWidth / 2, // here's a functional value that will update if the window size changes, (it will 'invalidate' on 'refresh') rotation: window.innerWidth / 2, // this value won't update scrollTrigger: { invalidateOnRefresh: true ... } })

Hey, that's more of a CSS question, we try to keep the forums to GSAP questions but this is an easy one so I'll help. You don't need flexbox on that tagline at all. Flex is for laying out elements on a responsive 2D grid. You've got a p tag there, with some elements (bold tags) and some text in the innerHTML. Flex will arrange the bold tags but can't do anything with the text. It's not made for use on text elements like this. I assume you just want to center the text? Something like this would work. #animation-container .tagline { position: fixed; text-align: center; width: 100vw; top: 50%; transform: translateY(-50%); }

Tip to get you going, it'll likely help if you add this image sequence to a timeline. Right now the function's returning a tween so you can place it into a timeline using .add https://codepen.io/GreenSock/pen/GRLENVm?editors=0010

Glad we got there in the end!

This is quite an amusing one. 😂 So innerHTML isn't technically an animatable value, it's either a string or nothing. Animatable values are things that can gradually change from one value to another, like numbers or percentages. e.g. You can rotate from. 10 to 360 easily as all the values in between 10 and 360 are valid You can't animate between backgroundImage: "none" and backgroundImage: url("myImage.gif"); because there aren't any intermediary states, you either have an image or you don't. However - GSAP does some clever stuff where it recognises complex strings and tries to animate between them for some CSS properties. I guess here you're passing GSAP a string and asking it to animate it. Obviously 1 is animating to 2 because that maps, but also the word "transparent" is something that you can animate with GSAP too, as that's used in CSS to represent a colour, and ultimately an rgba value.. 😂 This made me laugh but TLDR - it's not the right way to approach this. I assume you just want to set new text on scroll? You could do that with a set tween? If you want to actually tween the text you can use GSAP's text plugin for a more typewriter-esque effect. // instantly set the new text gsap.set("h1", { innerHTML: "Prepare for accelerated ramp-up, with transparent roadmap for staffing, knowledge transfer, team integration and performance KPIs.", }); // using text plugin? // replaces yourElement's text with "This is the new text" over the course of 2 seconds gsap.to(yourElement, { duration: 2, text: "This is the new text", ease: "none", }); Alternatively if you want to fade out one block of text for another, you'll need to layer the elements on top of each other and use opacity to fade them. Hope this helps!

You have to create ScrollTriggers in the order they appear on the page, if you have multiple forEach loops this might be throwing things off. Might be helpful to look into refreshPriority and sort? https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/