Circular Animation Image Gallery

[JackPhat]

Hi, I'm trying to rotate the gallery and it does rotate but it rotates in the wrong way. Can anyone help me?

I want it to rotate in the center.
I'm a newbie here. Sorry if the question was so easy.
I'm currently using ReactJS and I don't know why I can't log in to my CodePen account. It said "Login and Signup is unavailable"
So I'm giving a CodeSandbox link.
Hope you guys can give me some ideas.

 

Link:  circular-animation-image

[mvaneijgen]

Hi @JackPhat welcome to the forum!

 

Your CodeSandbox is not working it says "Sandbox not found". We have all kinds of  Stackblitz starter templates that load all the plugins and have a basic setup how to work in each framework with GSASP, here are the once for React and Next. When working with React please read this article!

 

There are a lot of topics already on the forum about circular ..., sliders, carousels, gallery, ect. Just give it a search and check out this topic, it has some nice resources already. Hope it helps and happy tweening!  

 

 

[JackPhat]

Hi @mvaneijgen I have just updated the CodeSandBox to public.

Could you please recheck it for me?
Here is the link: Circular Image Gallery

[mvaneijgen]

Your code Sandbox is read only, this means no one can edit it except you.

[JackPhat]

Sorry for wasting your time so much on this problem but I don't know how to set it to edit mode for all users.

But did you see the result?
It did rotate but it rotates on the border line. I don't know why it rotates like that.

I want it to rotate in the center like this GIF.

 

[mvaneijgen]

Yeah, I saw that and wanted to debug this, but due to not be able to edit it we can’t.
 

You can set transformOrigin: “center center”, but I don’t know if this fixes the issue. Should be the default? I would start by adding red borders around all your elements, so you can see what the real shapes look like to see on which it is rotating now 

[Cassie]

Here you go!

 

codesandbox link

 

You needed to set a width and height on the container and rotate from the center

 

Also for future reference this is where you set access rights in codesandbox.

 

Hope this helped!

 

 

[JackPhat]

Thank you so much, @Cassie and @mvaneijgen. This helps me a lot.
I have set it to public but I think it may need an account to edit it.

[MariaVillanueva]

On 7/28/2024 at 11:08 PM, Cassie said:

Here you go!

 

codesandbox link

 

You needed to set a width and height on the container and rotate from the center

 

Also for future reference this is where you set access rights in codesandbox.

 

Hope this helped!

 

Thank you cassie, you made my day. I am also new here. You solved my issue. If I want to know more, I will ask by starting my own thread. When I needed help with my dissertation, I decided to try https://ukwritings.com/dissertation-services The experience was outstanding! The writer was professional and understood exactly what I needed. They helped me focus my research and provide clear, well-organized writing. The final dissertation was delivered ahead of time and exceeded my expectations. I couldn’t have asked for a better service. I highly recommend them!

Thank you cassie, you made my day. I am also new here. You solved my issue. If I want to know more, I will ask by starting my own thread.