akalex_x

Hi, im working on this zoom in transition using clipPath and ScrolTrigger but im having issues with properly transitioning from one path to another. I am not sure if the issue lies in my gsap animation code, or if I prepped my svgs incorrectly. Here is a link to a demo of it https://codepen.io/akalex-x/pen/mdvOLxX As you can see it starts as a small flag crop that then grows full screen, and then I wanted to change it into a simple rectangle shape but when I try to do that it instead jumps to an awkward crop. I made my SVGs in figma and made sure they are the same size and have the same about of points. I then exported the SVGs and used https://yoksel.github.io/relative-clip-path/ to change the absolute paths to relative. Any help here will be super appreciated, thanks!

@Rodrigo Thanks for the reply, I thought the issue would happen on your demo as well so I didn't provide a minimal demo. However I went ahead and forked your minimal demo and indeed noticed that it worked fine on your demo. I looked into it deeper and found that this is actually a known issue with NextJS 13. https://github.com/vercel/next.js/issues/330 I am however not sure why it works fine on your demo, I tried multiple of the solutions on the thread but the following worked for me. I just added the window scroll to right before the rest of the ScrollSmoother code. useIsomorphicLayoutEffect(() => { window.scroll(0, 0); ctx.current = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 1, effects: true, }); }); return () => ctx.current.revert(); }, [pathname]);

Hi, I copied the code for the ScrollSmoother demo for NextJS app folder into my project at https://alex-wand.vercel.app/ , but im having an issue when switching pages. The code seems to work fine right out of the box with the rest of my animations, however it seems like when I navigate to a different page the scroll position is retained vs starting from the top again. Is there a way to modify the demo code for that?

Thanks @Rodrigo I thought that last parameter was just to group elements to animate together, didnt know it would affect timing. I wanted them all to move at the same time so I just passed a string instead and its working as expected now.

@GSAP Helper here is a link to a minimal demo of it. https://stackblitz.com/edit/nextjs-kvs972?file=styles%2Fglobals.css,pages%2F_app.js,pages%2Findex.js,components%2Fgallery.js

Hi, im working on a animation for this website https://alex-wand.vercel.app/ . It looks like ScrollTrigger sets the markers in the correct place ( start when the top of the section hits the center of the screen, and end when the center of the section reaches the center of the screen. ) However it looks like the animation itself starts late but then does end correctly at the center. const tl = gsap.timeline({ ease: "none", scrollTrigger: { trigger: $section.current, start: "top center", end: "center center", scrub: true, markers: true, toggleActions: 'play none reverse none', } }); tl.to($children[0],{ top: '5%', left: '10%', },1); tl.to($children[1],{ top: '0%', left: '60%', },1); tl.to($children[3],{ top: '57.5%', left: '5%', },1); tl.to($children[4],{ top: '80%', left: '40%', },1); tl.to($children[5],{ top: '56%', left: '82.5%', },1);

The video looks a lot like an issue I was having in the past ( not a next js project, but might be the same issue ). The issue was not with gsap, but the font loading. GSAP would calculate the width of things before the font I selected loaded, so I had to wrap my code like this. document.fonts.ready.then(function () { var loop = horizontalLoop($words, {paused: false,repeat:-1, speed:.25}); });

Got it, this makes much more sense now. Thank you both! I ended up keeping refresh on, and killing the animation on complete. This will only work for animations that you only need to play once, but it works for the purposes of what I was trying to do. In case anyone ends up looking at this thread, I also ended up changing my selectors a bit due to an issue I had with ScrollTrigger.saveStyles(). I was saving all of the styles for the image containers, this was saving both the clipping path and the parallax (transform y) from the desktop specific tween. So whenever the animation completed and I moved from desktop to mobile or vice versa all of the css would reset. I solved it by having 3 different containers for 3 different things, 1 for the parallax that could be reset using saveStyles, 1 for the clipping path, and 1 for the opacity change. I created a copy of the codepen and updated the code here https://codepen.io/alexkinejara/pen/RwjZaeK I am going to mark Jacks reply as the answer since I think the refresh was the original issue, but huge thanks to Blake as well!

As I look into the docs more it seems like the issue comes from invalidateOnRefresh? When the browser navigation hides, it triggers a refresh and resets my animation and triggers again once it passes by the "refreshed" triggers. Turning it off seems to be a quick fix to the issue, but then on desktop I loose a bit of the responsiveness of the site. I could do a function like the "startTrigger()" i already have to disable invalidate on mobile detection maybe? Hopefully there is a better way to fix this.

Hi blake, Thanks for the feedback, I think I understand how nesting a trigger on a timeline with an existing one would cause issues. I went ahead and just created a new tween separate from the timeline ( i believe thats the right terminology? ) for the parallaxing scroll trigger. I also moved my loop inside the match media, and went ahead and moved the timeline itself inside the match media under "all" ( im not 100% sure if this was required ). Everything seems to be working as intended so I assume this is right, however I am still having the same issue I pointed out on my phone. I updated the codepen if you want to look into the update. If its not too much trouble, could you explain how is it that even though I was nesting the trigger it seemed to be working correctly? Was it because the trigger itself was the same element? I never meant to use a different trigger for it, however when I didn't state the trigger again the parallax was way off.

I've been trying to figure out why this was working fine when I view it on my pc but its not on my phone for a bit now and I just realized that when the navigation bar disappears on my phone is when the issues happen. I realize that when the bar disappears the height changes so I am sure that's related somehow. I don't really have as much of an issue with the position at which is triggers, but whats weird is how it resets even when I have my toggleActions set to 'play none none none'. Any ideas on how to fix it? Here is a video for reference from my phone.

Ahhh thats awesome! I didnt expect it to run the function every time. Thanks!

I had not seen this! Thanks! This is almost perfect, just one small tweak needed. I only added the parallax tween inside the matchMedia function so that the rest of the animations keep working no matter the size. However, I would like to change the trigger start for mobile / desktop. I read on another thread I could pass a function to start so I implemented that, it seems to be working on load but I cant figure out how to have it update when the browser is resized. Is there a way to do that inside the matchMedia? I am guessing I could just copy all of my tweens into both desktop and mobile matchMedias and just change the trigger start there, but that seems like a bunch of repeated code for a tiny change. I updated my codepen to reflect these changes if you want to take a look at how im handling it on load right now.

Let me start by saying I am pretty new to GSAP. So far it's been pretty easy to use, but I am also not 100% sure if this is the best way to go about things so any feedback is welcomed. I plan to build a site that will have multiple of the same type of sections and I would like each one of them to have their own animation (same animation but triggered at their own time). To do this I created a timeline for each section and it works great (on desktop at least). However, this animation makes no sense in mobile. I would like to run some sort of check on resize ( or check width on scroll? ) and remove the parallax side of things. I did figure out I could write some css to stop javascript from changing the position but would rather have javascript not perform the change in the first place. As of now I just want to disable the parallax, but would be good to know what the best way of doing things for other scenarios like removing the animation as a whole for mobile, or having a completely different animation for mobile (have it be responsive as you scroll, not just trigger a different animation based on the initial width).