codechirag Posted December 24, 2023 Share Posted December 24, 2023 Hello guys, I am new to GSAP, recently I am trying to rotate a gradient infinitely but having issues. Help is appreciated. Thanks for this wonderful forum. See the Pen xxBbwoO by Chirag-Empyreal (@Chirag-Empyreal) on CodePen Link to comment Share on other sites More sharing options...
Toso Posted December 25, 2023 Share Posted December 25, 2023 here you go, i just added ease:'none', and also now it's working on the img, not the .box so you don't have this overflow issue with the body See the Pen WNmboRx by ahmed-attia (@ahmed-attia) on CodePen 1 1 Link to comment Share on other sites More sharing options...
codechirag Posted December 25, 2023 Author Share Posted December 25, 2023 Hello @Toso, thanks a lot for help. It is working fine. just if you can help me in this same thread I have some similar issue in another section in which the current solution is not working. Can you look into this? I am not able to move the cards infinitely in one direction. here is the code pen of that code. See the Pen wvOBoPG by Chirag-Empyreal (@Chirag-Empyreal) on CodePen Thanks again. Link to comment Share on other sites More sharing options...
Solution Toso Posted December 25, 2023 Solution Share Posted December 25, 2023 🤔🤔 1 question per day that is the limit, I'm kidding, and here is your demo 🙏 you need to use the https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop its works on x and y axes, in the demo i only added it to one line of boxes so you can play around it and test the other config See the Pen MWxYbVr?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen also, it can be useful to check this topic on how to create a demo since you were adding the CDN inside your code 1 1 Link to comment Share on other sites More sharing options...
codechirag Posted December 25, 2023 Author Share Posted December 25, 2023 @Toso, I don't know what could have happened to me if you were not there 😁. Thanks a lot mate. 2 1 Link to comment Share on other sites More sharing options...
Toso Posted December 25, 2023 Share Posted December 25, 2023 Don't worry everyone here has more experience and could have explained it better, it's your bad luck you got me 😂 🤣 have a good day 1 3 Link to comment Share on other sites More sharing options...
codechirag Posted January 1 Author Share Posted January 1 hi @Toso, sorry for troubling you again. can you tell me, How can I use this verticalLoop functions with React, when I try to add it in useLayoutEffect it throws a lot of errors. Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 1 Share Posted January 1 If you're using React, make sure you read this: https://gsap.com/react And instead of useLayoutEffect(), I'd recommend the useGSAP() hook. If you still need help, please provide a minimal demo. Here's a React starter template that you can fork. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 1 Link to comment Share on other sites More sharing options...
codechirag Posted January 1 Author Share Posted January 1 Hello @GSAP Helper, I am adding stackbiz which is the initial snippet from where I started then with the help of Mr.Toso I could make it happen to loop infinitely which is working in Javascript properly, but I wanted to use it with React project that's where the functions of vertical loop and horizontal loop provided here https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ not working and the function code is throwing a lot of error just as previous comment screenshot. I have not added that function right now in the stackbiz otherwise project will not run. Hope now you get my problem. See the Pen bGZNYwo by Chirag-Empyreal (@Chirag-Empyreal) on CodePen is the working javascript pen. Thanks for your quick response and here is the Stackbiz https://stackblitz.com/edit/gsap-react-basic-f48716-rm5kfn?file=src%2FApp.js Link to comment Share on other sites More sharing options...
Toso Posted January 1 Share Posted January 1 i tested it locally then copied the code and added it to the stackblitz but still can't find these errors everything is working fine I think 🤔 https://stackblitz.com/edit/gsap-react-basic-f48716-dbfagy?file=src%2FApp.js Link to comment Share on other sites More sharing options...
codechirag Posted January 2 Author Share Posted January 2 Hi @Toso, Thanks a lot, I got to know that all those errors were due to ESLint. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now