All Activity

Hi @stectix, Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption. I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo: https://github.com/rhernandog/next-gsap-bonus-yarn-vercel Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin): https://next-gsap-bonus-yarn-vercel.vercel.app/ I installed using the shockingly package since the plugins are the same: yarn add gsap@npm:@gsap/shockingly Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well. Hopefully this helps. Happy Tweening!

Hi, Honestly IDK what can be done since normally when you swipe on a touch device the momentum scroll will trigger. During that any touch input will immediately stop the momentum scroll. This is how browsers work mostly. On that note what type of touch event should not be considered an autoKill event? How can that be achieved? Right of the top of my head I can't think of a way to achieve this. Sorry I can't be of more assistance 🫤 Happy Tweening!

Hi, I would like to get help to fix an issue I'm encountering with the DrawSVG plugin and GSAP. I would like to animate my SVG element on hover and when I mouse leave it should revert. Currently, It's working fine except- If there are are multiple buttons all animation are executing at the same time when I hove any of the element, which I don't want. I want to execute the animation individually for each button. How can I achieve this effect? Many Thanks, Sajidul

One question on this, if I'm calling this when the user uses a finger press for iPad etc. what the best method of avoiding the autoKill thinking that the touch is actually a request to kill? Should I only be using touched for example? I spotted someone else with this issue a while back but it came to a headend. Thank you.

Not at all, just don't include the page flipping on that conditional block because that has to happen no matter what, right? Always create the page flipping animation and depending on the conditional block create the rest animations. Happy Tweening!

I have this animation on an image contained in a parent that has a background color and overflow hidden. At rest, the image fills the container, so the background color is not visible. gsap.timeline({ repeat: 1, yoyo: true }) .to(element, { scale: 1.1, duration }) This makes an image zoom a bit and return back to its original state. When it finishes, unfortunately the image has some tiny left and right borders that make the color of the parent visible. The problem is that after the animation, some styles added by gsap are kept on the image element: translate: none; rotate: none; scale: none; transform: translate(0px, 0px); This is the transform property that creates these parasite lines around my image. If I comment it in devtools, they go away.

I confirm this : I'm trying to use this feature and on IOS I have the impression that scrolling is faster

I ended up having to do this a bit more 'static' as it's such a small project. https://codepen.io/richardcool/pen/VwNgJZx But it would've been great for scrollTo to accommodate the scrollTriggers...

Glad you've solved it, be sure to check out FOUC guide https://gsap.com/resources/fouc/ there is a detailed guide how you can avoid these kinds of things. Happy tweening!

Ah, it seems to be fixed by setting style={{ opacity: 0 }} on the svg: Stackblitz Thanks again!

Hello @mvaneijgen thanks for the response! That's great to understand the use for immediateRender: false That has fixed the scrollTrigger animation. However there is still a peculiar issue with the element flashing when the page first loads. Actually it wasn't visible in Stackblitz in the small preview browser window, but when you click to view the browser view at full viewport size, and then give the page a hard refresh, you can see the svg appear, then disappear, and then animate in. Any ideas about how I can avoid this? At first I wondered if it was anything to do with React Strict Mode, but no luck. Could there be an issue with forwarding the ref the way I am doing? I also tried to add a gsap.set('.logo', { autoAlpha: 0 }) before my fromTo() but again with no luck. Notably, a regular refresh does not present the issue, but the very first page load does. Hard Refresh Flash.mp4

Is it recommended practice to instead put all my common animations for images, text intros in a single component and wrap every page in it? e.g. <MyGSAPAnimations> <PageOne/> </MyGSAPAnimations> <MyGSAPAnimations> <PageTwo/> </MyGSAPAnimations>

Hello, Demo here: https://stackblitz.com/edit/stackblitz-starters-snsg6l?file=app%2Fpage.tsx I might be using useGSAP incorrectly and trying to use it in reusable child components when it wasn't designed that way however after reading the documentation around scope I'm confused why animations are selecting everything, not just elements within the ref scope For my website I am trying to create images that scale on scrollTrigger. As I want to use the same animation across every image on the website (and there are hundreds) I am placing the useGSAP hook in the child component for the image rather than in the parent page component so I can simply use the component wherever I want to and it will be rendered with the animation. I eventually want to do the same with text animations as well However I am finding that when I do this even with a scoped useGSAP in the <Image /> component, if I animate by a scoped selector e.g. ".img" it will animate every ".img" on the page, not just the one contained to the scope. This results in every image animation being triggered at once rather than just the image that was triggered on scroll Is this just a React thing and I should be doing all animating from the parent page? Just feels like a bit of an anti-pattern in the React world of reusable components Thanks very much for any help!

Thank you for your tips. I will check your solutions within 7 days and let you know, because the page I sent requires corrections and is under construction.

Sadly we cant live debug a GitHub repro. Also we don't need all the code just the minimum issue you're having trouble with, that is why we've created ou Stackblitz starter templates so you can jump in and just create the bare minimum to demonstrate the issue you're having.

Hi @spotipre welcome to the forum! The angled black part you can do with a clip-path animation, see simple demo below https://codepen.io/mvaneijgen/pen/MWLxyPp And the weird image effect you can probably do with something like Pixi.js. Keep in mind that this question is kinda outside of the scope of these forums, we like to focus on GSAP specific questions, so if you still need help be sure to post a minimal demo focused on an issue with one of the GSAP tools. Hope it helps and happy tweening! https://pixijs.com

https://github.com/hengshanMWC/gsap-ScrollTrigger Is it possible with github?

If you look at the StackBlitz I created you can see that instances of ScrollTrigger are firing their onleave event on instantiation. But as they haven’t been scrolled they shouldn’t fire an onleave event A react hook abstracts logic to make it reusable. ueaGSAP is the same. The hook I created does the same except it also contains tweens and attaches the timeline for those tweens to a ScrollTrigger that then uses a master div as its scroller. It’s how I designed it based on other answers in this forum. With the hook I can just pass a ref in from amy component and have it animate. If I just used useGSAP I’d write a lot more code. Which is the cornerstone of react.. reusable functions that save you repeating yourself yourself

bu videodaki animasyonun adı nedir nasıl yapabilirim uzun zamandır arıyordum bulamadım

Hi @Rodrigo and @GreenSock thanks again for the help and comments. I have updated my code but I think the issue is perhaps this comment from Jack: The page is made up of different timelines and scrollTriggers, not just one for all, so defining a `containerAnimation` that contains all the elements is a bit tricky, right? However, this is just a landing page of two anchored sections (About and Information) so I thought getting the scroll position to scroll to for two sections would be fairly straightforward. I understand what you're saying @Rodrigo about your initial example working without the `getScrollLookup` function, which would obviously be ideal, but even stripping it back I couldn't get the correct scroll position. In my example the pinned container is the parent container of all sections whereas in other examples the pinned container is the same as the trigger. In order to make mine work I had to make the parent the pin... I wonder if this is causing issues. I'll keep trying and update if I have any success but any help understanding if it's possible to use getScrollLookup for individual parts rather than as a layout that is completely animated would be great.

This was very helpfull. Thank you!

Thanks I was stuck on doing it with gsap.from and this is simpler 😅 Sometimes you are so deep into something and you don't see that the solution is simpler

Sorry for the late reply @Rodrigo , was busy improving the code so that it translates well to what i want to do with the book tho its still buggy as heck. Reason is that i want make an if condition is that i want to add additional animations inside each page, tho i must admit I'm not good at creating a dynamic function for that. Based on what you're saying is that i should leave the PAGES function as it is and just do my other animation separately?

Haa, ok I get it now. Thanks !

Dear admin/devs at Greensock. You need to make a solid fix for this Yarn issue asap! I don't wish to be too abrasive with my comment but this issue is seriously annoying. Nothing in this topic or your installation page works. Im on a pretty standard setup (macos, homebrew) and this should not be happening. I went ahead and used the zip file solution because Im sick of trying this for years with no success. Installation should be fluid and easy, allowing us devs to get to work as quickly as possible. There needs to be a fool proof guide that works for local env and popular deploy services like Vercel. Please.