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]

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.