All Activity

Hello, I am using the MotionPathPlugin to move a character to specific points on an HTML page upon clicking and navigating to a subpage. Each time I navigate to a subpage, I will set a cookie to determine the location of the main character on the path. And I want the function to run by taking the start index as the current position of the character. CodePen it not available now . The purpose of the code is: Move an element to a specific point and navigate to a new page after a timeout. My code: function moveCharacterFn(url, endPoint, movingTime) { gsap.registerPlugin(MotionPathPlugin); //redirect to subpage after moving animation is done! setTimeout(function () { url.click(); }, movingTime * 1000 - 100); // declare a null tween variable let tween; function createTween() { // save progress before we kill tween if it exists. let progress = tween ? tween.progress() : 0; // kill any pre-existing tween. tween && tween.progress(0).kill(); // create the tween tween = gsap.to(".character", { motionPath: { path: ".path", align: ".path", alignOrigin: [0.8, 0.8], autoRotate: false, start: 0.05, end: endPoint }, duration: movingTime, repeat: 0, repeatDelay: 1, ease: "power1.inOut", }); // update tween's progress tween.progress(progress); } createTween(); // listen for window resize to recalculate tween. window.addEventListener("resize", createTween); } My HTML: <div class="character"></div> <div class="road"> <svg viewBox="0 0 1467 632" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_323_1396)"> <path class="path" d="M-25.9998 42.1445C-25.9998 42.1445 547.056 40.2526 860 46.1438C1311.5 54.6434 1392 145.643 1392 218.143C1392 290.643 1315.5 312.144 1131.5 320.644C1049.64 324.426 838.814 312.538 786 332.143C720.099 356.604 858.209 421.941 883 436.143C936.604 466.849 1019.98 501.916 1050.5 528.643C1123 592.143 1131.5 634.643 1131.5 634.643" stroke="#020878" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="20 20" /> </g> </svg> </div> .character { position: absolute; width: 50px; height: 50px; left: 0%; bottom: 30vw; background-color: green; } .roads { position: absolute; bottom: 0; left: 0; width: 80vw; height: 68vh; } .roads svg { position: absolute; bottom: 0; } // do not wonder why am i using bottom I know it's a bit of complicated. Well, i cant explain a complicated problem with quite sketchy, hope you can understand it! Have a good day!

That issue actually has nothing to do with GSAP - it's how stacking contexts work in browsers. When you apply a transform of ANY kind or even if you only apply will-change: transform, it creates a new stacking context. Feel free to remove GSAP completely and just add that CSS and you'll see what I mean. I'm a bit confused as to why you'd expect the stacking order to work properly like that - you've got the thing you're fading BEHIND a fully-opaque element, but you seem to be expecting it to act like the semi-transparent thing is in front. Why not either order the elements correctly in the markup -OR- use z-index to have them in the proper order?

oh,I have a mistake with the "start".I changed it, and it properly works as my expectance. thank for your help again.

Hi Cassie! Thank you so much for replying. I tried to remove the filter, and as you said, it works better! Kinda sad to remove the blur filter, but eh, as long as it works. Again, thank you!!

Thank you Jack for reply. I have a grid gallery, and I need to change images on hover. Some of them have additional animations like scaling and fading in/out elements. Fading in/out elements works well with the :hover statement until I add scaling. https://codesandbox.io/p/sandbox/animation-n2xs6s?file=%2Fsrc%2Findex.html%3A16%2C45 Maybe I need to change images on hover by using GSAP not CSS?

I have faced the same issue in sveltekit, let me share the reason. I was using native svelte transitions to animate between pages. So it translates the page due to which the scroll positions are effected. If you are using them and you remove them and use view transitions. Scroll trigger will work

Hi, I'm not 100% sure I understand what you're trying to achieve here, but maybe something like this? https://codepen.io/GreenSock/pen/rNgGLYL Hopefully this helps. Happy Tweening!

Hi there, new to GSAP and I'm wondering if someone can point me in the right direction to achieve this effect: https://fading-section-template.webflow.io/ Basically, the different background images fade in / out as you scroll up and down the different sections / or if the H1 in the next section comes into view. This seems like such an easy task for GSAP, but I've been searching and testing different probable solutions and the closest I've come is this (which is a total hack job): https://codepen.io/webdevcanuck/pen/xxNrRqV?editors=1111 Thanks so much in advance!

Hi, Right now I don't have time to dig into all of this and provide a demo. As mentioned before this is not the simplest thing to achieve. I'll se if I can create a simple demo that shows how to create two different Observer instances that work with ScrollTrigger but please understand that we don't have all the time resources to create demos for complex issues, I just want to manage expectations. Finally regarding this: That seems super odd because onEnter and onEnterBack trigger in very different ways. The onEnter callback is triggered when scrolling forward or down while the onEnterBack is triggered when scrolling back or up. Finally I recommend you to use the same settings for wheel speed and tolerance as the demo we have, since most likely the scroll event is still being triggered when the animation is completed, perhaps add an extra conditional logic there until the touch event is no longer firing. Keep in mind that mobile devices have momentum scroll baked in, so is not just a one off event like the mouse wheel. You can test this URL on your device and see if you get the same issue: https://codepen.io/pen/debug/oNdNLxL Happy Tweening!

Here is a temporary fix I guess when using useGsap and NextJS app dir. register the plugin outside of the components, and on your root layout body add suppressHydrationWarning, this is fine I think, next-themes also uses this approach. I also posted an issue on github https://github.com/greensock/react/issues/8#issuecomment-2158622840

Yep, there are two important pieces: x: () => window.innerWidth - boxes[boxes.length - 1].getBoundingClientRect().right, We made x a function-based value and set invalidateOnRefresh: true on the ScrollTrigger which basically means that whenever the screen resizes, it'll FLUSH the old value and re-call that function to use that new value instead which is what makes it responsive. And the math in there is just figuring out the coordinate of the right-most edge of the last box and how far we'd have to move to make that edge touch the right edge of the viewport. So the resulting x value should be negative, so it's moving it to the left.

Are you saying that you may have things causing a page reflow/resize WHILE the user is actively scrolling on an iOS device AND you want to force a ScrollTrigger.refresh() DURING that process without stopping the momentum-scroll? I don't think that's feasible. You could, however, set it up so that it waits until scrolling is done, and THEN does the ScrollTrigger.refresh(). Is that what you're looking for?

Hi, This could be about proper cleanup on route changes. For that I would recommend using GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() This demo, doesn't have any routes, but uses GSAP Context in the way we suggest for SvelteKit projects (or any other framework that handles routing in the way SvelteKit does it like Vue and React and SSR libraries/frameworks that use them under the hood): https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6?file=src%2Froutes%2F%2Bpage.svelte https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9?file=src%2Froutes%2F%2Bpage.svelte Hopefully this helps. Happy Tweening!

Thank you!

Hi, Just an issue with how you were using CSS variables and the fact that you are adding CSS transitions to it as well. Is a bad idea to add CSS transitions to the same properties GSAP is animating as Jack explains in this thread: Here is a fork of your demo: https://codepen.io/GreenSock/pen/bGyoddr Hopefully this helps. Happy Tweening!

Update: I think I have figured out everything that works and doesn't work. Am in the process of updating everything before posting a good 'starter' and tips on the above project configuration between Svelte/Kit/GSAP.

Hi, Maybe you're setting the scroll inside an element different than the window object? ScrollTrigger checks the scroll position in the main window object by default, so if you set your ScrollTrigger instances and have the scroll in an element other than the window object, nothing will happen. You could check the scroller configuration option in your setup: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#scroller If you keep having issues, then please create a minimal demo that clearly illustrates the problem. Happy Tweening!

Hi, Maybe these demos can provide a good starting point for this: https://codepen.io/GreenSock/pen/oNJMgYp https://codepen.io/GreenSock/pen/LYvoaNb https://codepen.io/GreenSock/pen/xxeEjwo https://codepen.io/GreenSock/pen/abrBJYJ Hopefully this helps. Happy Tweening!

Hi, I'm having a hard time understanding what is the issue you're facing here. Based on the code in your demo, everything is actually working the way it should, ScrollTrigger is doing what is supposed to. Right now you have this: onMounted(() => { gsap.to('.inner', { scrollTrigger: { trigger: '.inner', markers: true, start: 'top bottom', }, x: 200, duration: 2, }); }); That tells ScrollTrigger to start the animation when the top of the trigger element reaches the bottom of the viewport, which is exactly what's happening. You can check the ScrollTrigger docs for the start position configuration option: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start Also I refreshed the preview of the demo and can't see the markers in an odd position, if there are any specific steps to reproduce the issue please let us know, or maybe I'm missing something here 🤷‍♂️ Happy Tweening!

Hi, There is no need to create a codepen if you can share the Svelte code. Just use a Svelte repl link: https://svelte.dev/repl/bd10a0741c8b4aaa8664b11357a0e678?version=4.2.18 Or a stackblitz link as well: https://stackblitz.com/edit/sveltejs-kit-template-default-81fmph Happy Tweening!

I tried to make a swipe in on hover effect for my button, I found out you can't directly manipulate pseudo elements in gasp and I found out about the variable way. When I hover over the link it slides in but when I hover out it does nothing; it just stays there, it does not reverse back to its original position. It worked for rotate, skew and scale but not for transform translateX. I also tried using left property, but it had the same exact results. My example: using variables with gsap (codepen.io)

This codepen illustrates the issue. Adding margin-top to each image container pollutes or offsets the start and end positions of the scrollable icons. https://codepen.io/bmunslow/pen/XWweJKV

Hi! First up, thanks for this amazing library! I have a fairly simple parallax effect whereby a few image containers and icons scroll over a pinned text wrapper. This is working swiftly as you can see here: https://codepen.io/bmunslow/pen/abryeMX The issue is that adding some spacing between the image containers offsets the start and end position of the icons within each container (see Codepen in next comment) The only difference between both pens, is the extra margin-top CSS in lines 49 and 56 of the SCSS pane. What would be the right way to handle this animation so I can modify spacing between the image containers without affecting the relative scrolling of the icons? Thanks in advance for your help!

Thanks! I'll get this updated 💚

Hey, The solution in in the JS panel of that demo, so this (working solution) gsap.to(boxes, { x: () => window.innerWidth - boxes[boxes.length - 1].getBoundingClientRect().right, ease: "none", scrollTrigger: { trigger: ".content-wrapper", start: "top top", end: "200% bottom", pin: true, scrub: true, markers: true, invalidateOnRefresh: true } }); rather than this (your solution) gsap.to(".box", { x:".jani", ease: "power1.inOut", scrollTrigger: { trigger: ".content-wrapper", start: "top top", end: "200% bottom", pin: true, scrub: true, markers: true } });