OSUblake

For SVG coordinates, it's usually better to use getBBox instead of getBoundingClientRect. Here's a post that goes into some of the details and gotchas of getBBox.

You would need to call reverse on the instance you opened the modal with, so something like this... let modalAnimation; function showMenuModal() { modalAnimation = (mainWrapper.getAttribute("data-layout") === "mobile") ? playMenu({yPercent: 100}) : playMenu({xPercent: 100}); }; function hideMenuModal(e) { modalAnimation.reverse(); }; function playMenu(param_1) { return gsap.timeline() .set(".menu_container", {zIndex: 1}) .to(".menu_outer_modal", {delay: 0.2, ...param_1}) .to(".menu_inner_modal", {opacity: 1}) .to(".menu_outer_modal > .close svg", {opacity: 1}, "<"); }

We have some stuff in the blog and learning center. For something more in depth, @Carl has some excellent courses over at his Creative Coding Club. And then @PointC has some really nice tutorials at MotionTricks.

You can merge objects like this. function showMenuModal() { (mainWrapper.getAttribute("data-layout") === "mobile") ? playMenu({yPercent: -100}).play() : playMenu({xPercent: -100}).play(); }; openMenuBtn.addEventListener("click", showMenuModal); function playMenu(param_1) { return gsap.timeline({paused: true}) .set(".menu_container", {zIndex: 1}) .from(".menu_outer_modal", {delay: 0.2, ...param_1}) .to(".menu_inner_modal", {opacity: 1}) .to(".menu_outer_modal > .close svg", {opacity: 1}, "<"); }

Hi tjefe, Why do you have ScrollTrigger in there? And please see the forum guidelines, as we try to keep these forums focused on GSAP-specific questions. We don't have to resources to help with out logic issues and integration with third party tools. That said, I'll take a look at it, but first you need to make a minimal demo. So maybe just include a simple animation with a box. There is no need for anything other animations or hundreds of lines of HTML and CSS.

How about something like this? I think using a different scroller messes up on mobile due to the way the browser handles scrolling on a different thread. ScrollTrigger Demo Jumpy (codepen.io)

Welcome to the forums @DannyCoding It's really hard to troubleshoot a live mobile site. Do you think you can make a minimal demo that shows issues. It doesn't have to be your entire project, just the bare minimum needed to reproduce the issue.

Hi Manan, Can you put that in a minimal demo. It's very hard to answer ScrollTrigger questions without a working demo. Thanks!

You just need to create a ScrollTrigger without a trigger. 😉 A Pen by GreenSock (codepen.io)

Welcome to the forums @Patrick R Unfortunately, convertToPath will not work on text. About the only JS library that would even be able to handle that would be opentype.js. It would be much better to just convert your text to a path with an SVG editor.

How about this? ScrollTrigger Color Change Issue (codepen.io)

Nah. And a timeline .to is just this under the hood, so it would be creating the same amount of instances as stand alone tweens. gsap.timeline() .add(gsap.to(".foo", { x: 100 })) .add(gsap.to(".foo", { y: 100 })) So I'm not exactly sure what you're trying to do here, but I would not animate an element you are pinning. Instead, I would put your boxes inside the pinned element. When you want them to go back to their start just animate their x and y back to 0. I didn't mess with your parallax code or the red box so ignore that part. A Pen by GreenSock (codepen.io)

Hi @Devi16 We really try to keep these forums focused on GSAP-specific questions (please read the forum guidelines). If you've got any of those, we'd be happy to help.

Welcome to the forums @Kepbob We really try to keep these forums focused on GSAP-specific questions (please read the forum guidelines). I would suggest studying the original CodePen with no JavaScript just to see how it's laid out. The horizontal scrolling is fake. It's just animating a container on the x-axis. And I would also suggest getting rid of any mousewheel events and other jQuery animations.

Welcome to the forums @Davidstr If you want to toggle an animation by hovering, it's usually best to create your animation outside of the listener, kind of like this. Hover toggle (codepen.io)