I want to rotate one image in infinite loop without any interruption or break.

[codechirag]

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.

[Toso]

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.

[codechirag]

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.

[Toso]

??  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 

 

[codechirag]

@Toso,  I don't know what could have happened to me if you were not there ?. Thanks a lot mate.

[Toso]

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 

[codechirag]

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.

[GSAP Helper]

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. 

[codechirag]

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

[Toso]

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

[codechirag]

Hi @Toso, Thanks a lot, I got to know that all those errors were due to ESLint.