Sabz

Hello everyone, I'm using GSAP with my Next js project. But after adding API the GSAP animations are not working. For example, I have a single post page. The contents of that page are coming from an API. I've some heading animations. But those are not working. I also tried to add a preloader to render those contents conditionally. That's also not working. Note: I'm using SWR for fetching data.

Here is the solution https://codepen.io/sabbirzzaman/pen/dyrMvYx

I'm trying to create something like if I hover on a particular section my cursor will change. I've linked my CodePen that I tried. In my case, when I'm hovering over the "show" section I'm getting the custom cursor. But when I'm moving the pointer to another section the custom cursor is not getting hidden. Also when I'm hovering over the "show" section the custom cursor is revealed from the top left corner of the page. But I need the cursor to sync with my mouse pointer. Like when I'm hovering over the section the custom cursor should reveal from the mouse location. And here is a short brief of what I've done on my code. I use "scale-0" to hide the custom cursor Initially. When I'm hovering over the "show" section I've changed the "scale" value to "1" to reveal the custom cursor. And "onMouseLeave" I've changed the scale value to "0" again to hide the custom cursor again. (Note: I'm not sure why the "Custom cursor" is not hidden initially on CodePen)

Hello everyone, I'm trying to create a simple text marquee. But in my case, the marquee is just getting repeated. But I was trying to make an infinite marquee.

Hey @Rodrigo, Here is the updated one. I'm also having another issue with this. If I hover and hover out too frequently the links and the menu both are getting visible. Can you help me with this? What I'm doing here is, initially I'm using transform: translateX: 100%; to the "Menu Links" to make them hidden. And when I'm hovering over the "Menu button" I'm using transform: translateX: 0; to the "Menu links" to make them visible and also using transform: translateX: 100%; to the "Menu button" to make the button hidden. (Note: I'm not sure why the "Menu links" are not hidden initially on CodePen) https://codepen.io/sabbirzzaman/pen/QWobKJe

Solved!!

Hey everyone, I'm working on a menu animation using gsap. The animation kinda works, but I think it could be smoother. Right now, when I hover over the menu button, the links show up from the middle. I'm trying to make them reveal from just one direction. Any help to make the animation better would be really appreciated. Thanks!

Hi @mvaneijgen, I gave it a shot, and on my localhost, the text splits and forms a circle using the map function. But on CodePen, it's not working well. I think my approach might be off, and the animation isn't working correctly. Can you help me out? https://codepen.io/sabbirzzaman/pen/MWxWxNg

How can I create this same animation with gsap and next js?

Hello GSAP community, I'm seeking guidance on replicating the text infinite marquee/slide animation on the reference website. At the bottom of the hero section, there is a text infinite marquee/slide animation. And you can see the marquee is also reacting on scroll. It just moves a bit faster when scrolling. Reference website: https://lunivers.lu/ I would greatly appreciate any insights or assistance you can provide to help me achieve a similar effect on my project.

Greetings everyone, I'm currently working on implementing a button animation that activates upon mouse hover. I've provided my CodePen demo in this forum post. On my CodePen you can see the button is only moving to the left side. But I want the button to move to the opposite side of my mouse. Here is an example of what exactly I'm looking for (You can hover over those nav links to see the animation): Example Url If anyone can help me to enhance my animation, I would greatly appreciate it. Thank you in advance for your help!

***Update*** Hello guys, I've found another solution. I'm using clip-path instead of using pseudo-classes. That's I don't need to use the CSSRulePlugin anymore. And my problem is now solved.

Hi @Rodrigo, Thanks for sharing the docs. But I've already read that doc before. It says CSSRulePlugin has been deprecated in favor of using CSS variables. But I'm not trying to select a CSS variable. I need to select a pseudo-class (::after). And I'm using the exactly same thing according to the documentation. I'm also using the same method: But I'm getting those errors that I mentioned earlier. Could you please help me identify the issue? Thanks.

Hello guys, I'm currently working on an exciting image reveal animation for my Next.js and GSAP project. To achieve this, I've utilized the CSSRulePlugin to target the ::after class. Surprisingly, the animation works flawlessly on my localhost:3000, but unfortunately, I encountered an error after deploying the project. For your convenience, I've created a Codepen that demonstrates the exact implementation I've used. Additionally, I've attached some screenshots showcasing the encountered errors. I have this warning on my localhost:3000 (but everything is working fine on localhost): And here are the output and errors after the deployment: (output) (browser console) I've also done some research, but I couldn't find any specific Next.js support addressing this particular issue. If anyone has encountered a similar problem or has any insights into resolving it, I would greatly appreciate your input. Thank you all for your time and assistance. Best regards, Sabbir

Hello fellow GSAP enthusiasts, I hope this post finds you all in good health and high spirits. I'm currently working on a project where I need to create a section animation using GSAP and Next.js. Despite my efforts, I haven't been able to find a suitable solution. I'm reaching out to this community in the hopes that someone can provide some guidance or point me in the right direction. To give you a clear idea of what I'm aiming to achieve, I would like to replicate the section animation showcased in this example: link to example. You can find the animation below the "About me" section on that webpage. Essentially, as the user scrolls, the image and content within the section slide vertically in a visually pleasing manner. While I initially attempted to create this animation using GSAP and Next.js, I have struggled to find the perfect implementation. I'm open to using alternative frameworks or libraries if they better suit this animation requirement. If anyone has successfully implemented a section animation like the one mentioned above, I would greatly appreciate any tips, code examples, or even a walkthrough of the steps involved. Thank you in advance for your time and assistance. I'm looking forward to your valuable input!