Leaderboard

I've just build something similar, check it out! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNWxPGV?editors=0010

That's because the browser's getComputedStyle() doesn't return the calc() data properly. So when GSAP gets the starting (from) value, the browser gives it a value with no calc(), and then the end string has calc() in it with multiple numbers. It's the same issue with your other demos (mis-matched data/quantities). There are two solutions: 1) Use CSS variables: https://codepen.io/GreenSock/pen/RwOgRJQ 2) Use a normal .fromTo() tween so that GSAP understands what you're trying to do and can use the raw starting value instead of a computed one from the browser: https://codepen.io/GreenSock/pen/wvZeWXQ?editors=0110

Everything just fine and normal in GreenSock tower 😂

Hi @edwardsjethro welcome to the forum! Yes! No it does not. Below from the price page https://gsap.com/pricing/ No you are not, if you want to still sell your theme you'll need to have a business licence. If you stop selling it your current clients will still be able to use the theme they've bought with all the features of the tools. More info over at https://gsap.com/licensing/ Hope it helps and happy tweening!

Your pen doesn't load GSAP nor ScrollTrigger, would be great if you could at least provide a pen that is working at that level. For the centring of things, just remove ScrollTrigger and GSAP and focus on your CSS, lay everything out as you want it. Only after that is done add GSAP back in. for you pin question, pin: true pins everything located inside your trigger element. Your trigger element doesn't contain your circle, so it doesn't get pinned. Instead of using your trigger element as the pin you could also change the pin: true to an element eg pin: ".wrap-all" which would pin everything because this does contain your circle. Hope it helps and happy tweening!

Hi @leandronn and welcome to the GSAP Forums! Indeed this doesn't seem related to GSAP IMO. I have no experience with CSS scroll-snap so I couldn't really tell you what's the issue. Maybe is related to the height of the element at the moment the scroll starts or maybe is something else, honestly I don't know, but GSAP is definitely not in control of that part so that is not something GSAP is mishandling something or anything of the sort and I don't know how that a simple animation translating an element on the Y axis could cause such behaviour. Maybe you could look into the Observer Plugin and drop scrolling altogether: https://gsap.com/docs/v3/Plugins/Observer/ Sorry I can't be of more assistance. Happy Tweening!

Oh that's beautiful, just what I was looking for! Thanks!

Hi @PaulSorry and welcome to the GSAP Forums! Maybe something like this: https://codepen.io/GreenSock/pen/yLrXKxm Hopefully this helps. Happy Tweening!

Lets tackle one questions at a time. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!I see a tween for the element .line-2 but I see no element in your html? I've copied the logic from my post on stacking cards, because this is kinda the same effect. (Please read the post below it goes over some key points) Again it is so important to first focus on the animation you want to happen, so now with each content block animating in and out try adding the change of color of each tab index element, so that the correct one turns red when the correct element comes in. See how far you can come and shows us with an updated demo what you've tried when you get stuck. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/wvZeePx?editors=1010

Sorry, I forgot to add the gsap and scrollTrigger into the pen. But you got the issue and solved my problem. I din't understand the concept of pin before. Thanks for clarifying it. I moved the section that needs to change on scroll into the container that has circles and made the circle container a pin. Now it's all working. Thank you so much for the help. I might have spent a good amount of my day figuring this out.

Hi @cgeorgiev welcome to the forum! Check the link https://gsap.com/resources/get-started/ posted in the previous reply, this would be the starting point I would recommend anyone new to GSAP give a once over. It is not directly the solution you're looking for, but the beauty of GSAP is that you can build anything you like, the only thing holding you back is your own creativity. So I would first focus on the basics of the tools. You could look for something similar, but personally I would start with something you have build your own that way you can really learn what the tools are capable of. https://codepen.io/GreenSock/collections/ here are all types of pens you could look for inspiration and below something that has the features you're looking for, but not the same layout. Again everything in GSAP starts with an animation, so I really encourage you to start with that and don't worry about ScrollTrigger. When you still need help be sure to post a minimal demo of what you've already tried and we be happy to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/bGVjLwG

That's because your starting and ending strings have different amounts of numbers and are formatted differently, thus the complex string animation can't function the way you expected. There are two pretty easy solutions: 1) Just make sure the start/end strings have matching formatting and quantity of numbers: https://codepen.io/GreenSock/pen/OJGgXRQ?editors=0010 2) Use a CSS variable to simplify things: https://codepen.io/GreenSock/pen/GRLEqNO Does that clear things up?

window.addEventListener("load", ...) should not be needed as by default the script tag is a module and is called once the dom is ready anyway https://docs.astro.build/en/guides/client-side-scripts/#script-processing you may need to use it if you use the script inline (is:inline)

@Cassie This looks like it made everything work... Now the triggers after the horizontal scroll trigger at the height it should. Thank you! ScrollTrigger.create({ refreshPriority: -1, // lower priority makes it happen later in the refresh() calculations ... });

Hi, These demos should provide a good starting point: https://codepen.io/GreenSock/pen/NWWgXMO https://codepen.io/GreenSock/pen/mdqLWVV Happy Tweening!

I seem to have identified the cause of my problem. At least ScrollToPlugin is now working. As it turns out, it had nothing to do with GSAP, but I'll leave my solution in this forum for anyone else facing the same problem. The cause was the lack of output.format:'iife' in my rollup config. Here is my final rollup.config.mjs code. import { dirname, resolve } from 'path'; import { nodeResolve } from '@rollup/plugin-node-resolve'; export default { input: [ resolve(dirname(new URL(import.meta.url).pathname), './src/index.js'), ], output: { entryFileNames: '[name].js', dir: 'public', format: 'iife', }, plugins: [ nodeResolve({ extensions: ['.js'], }), ], }; Finally, thanks again to @GreenSock for the advice!