OSUblake

Welcome to the forums @csphilli If you're using ScrollTrigger, you can use matchMedia to create your animations according to a media query. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Or maybe manually writing your own media query listener. https://codepen.io/osublake/pen/WKpmxN If you're constantly calling those functions, then I'd just make the property dynamic, although I'd probably use fromTo instead of from. See the Creating from() logic issues here. let axis = window.innerWidth < 500 ? "y" : "x"; gsap.fromTo(".box", { [axis]: 150 }, { [axis]: 0 });

Hi Chromium, Creating your animations outside of the handler is usually the best idea. Every time you click on that button, you are creating a brand new SplitText instance and also a timeline. Animations from the previous click's timeline could still be running because you didn't kill them, so you're going to create conflicts, and that includes that onComplete which reverts the SplitText. GSAP won't Splittext before element (codepen.io) Another variation of what you were trying, but I'm forcing the previous to completion. GSAP won't Splittext before element (codepen.io)

If you need help with something, please provide a minimal demo of your issue. The observer docs has a fullpage-like demo that would be a good starting point. And keep in mind that the Observer is not a plugin like fullpage. It's just a way to listen for certain events. https://codepen.io/GreenSock/pen/XWzRraJ

What are you trying to do with the Observer? If you're trying to do something like fullpage, I linked to plenty of examples that you can use to learn from.

Hi jilianadriana, Is this what you were trying to do? You had facts instead of fact as the trigger. Fun Fact (codepen.io) Also, you can't animate a single pseudo element using the CSSRulePlugin. I would recommend animating CSS variables instead.

So do you have GSAP-specific question? It doesn't look like you're using it in your code, and Fullpage isn't a GSAP product.

What are you trying to do? Are you going for that fullpage thing or ScrollTrigger?

Which functionality? There's a bunch of Observer demos here. Observer Showcase - a Collection by GreenSock on CodePen

Do you have a minimal demo showing the issue? It's very difficult to troubleshoot a live site. And if you're trying to transitions like fullpage, then ScrollTrigger might not be the best option as it designed to work with native scrolling. If you want transitions based on mouse wheel events, then that's what our new Observer plugin is for. https://greensock.com/docs/v3/Plugins/Observer

Hi madeshv, As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites. Maybe the demo linked to in this post can give you some ideas.

Hi Eriberto, I'm not sure what you mean as none of the demos in this thread are using that. If you have a question, it would be best to start a new thread and include a minimal demo of your issue. Thanks!

Ok, I watched the video, but now I'm a little confused about what you're having problems with. What's the issue with the demo you posted above?

Hi @Achyl Your video isn't public, so we can't see it.

Welcome to the forums @Deallie_Digital I'm not sure what you mean by fonts with clamp. Do you have a minimal demo of what you're trying to do.

You can try setting will-change on the content. It might make the text blurrier during scrolling, but it can improve performance. #smooth-content { will-change: transform; }

We really can't help without a minimal demo. You can use CodeSandbox to show the issue. Just fork this and add another page and your code. https://codesandbox.io/s/reverent-vaughan-5pw6zt?file=/main.js

You should use ScrollSmoother's .scrollTo method for moving around the page. https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() https://codepen.io/GreenSock/pen/KKXZOyZ And if you're navigating to a new page then you would need to check to when the page first loads.

Hi carlson, Everything is updated at the end of frame, just like if you were using GSAP's ticker or requestAnimationFrame. So if the first frame last 16.7ms, then it will call onUpdate and onComplete and anim2 will be rendered 6.7ms into its animation. But you really shouldn't be too concerned about something like that. Is there something in particular you were having trouble with or trying to figure out?

I don't know what start and stop do, but it sounds like it might be paused? https://greensock.com/docs/v3/Plugins/ScrollSmoother/paused()

If your animation works the way you want, then don't worry about those warnings. If not, I'm pretty sure the only way to do a non-scaling stroke like that would be to recreate the path on every resize by transforming every single point the path. Definitely not trivial.

Hi Anthony, I'm not exactly sure how you are expecting this to look, but I think you just need to adjust your start and end values to get your desired result. I would also not suggest animating any properties on your trigger that might cause the trigger to move, for example scale, height, and y. Also, when running React 18 in strict mode, it's critical to kill anything you create inside an effect as React is going to mount, unmount, and then mount every component. That's why you are seeing 2 sets or markers because it created 2 ScrollTriggers. https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state So I would suggest using a wrapper as the trigger, and then if necessary, adjust the start value. https://codesandbox.io/s/muddy-meadow-hbpqlw?file=/src/Footer.jsx

I think I've isolated the problem to the fromTo animation here. This probably needs some further investigation. https://codesandbox.io/s/infallible-shtern-1vknln?file=/src/Home.js

Yeah, that's different than the link you posted above. The Home component doesn't have any code in it, and also this. Note that it should be IDs and not className. https://codesandbox.io/s/mystifying-dijkstra-ojif3k?file=/src/App.js

Here's a demo with React, maybe fork this one. https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh Edit. That's using next.js, but maybe it will give you an idea of how to set it up.

Did you forget to save your sandbox? The link you provided is just showing the demo that Cassie linked to.