I have a logo button that I’d like to move from the center of any screen to its original position using animations in my loading animation.
My name logo button is in the top left corner, housed in the header. In my loading animation, the three label circles meet in the center of the screen, and expand outward, turning the background black and “revealing” this name logo button. The logo then moves to the top left corner in its original place.
The label circles can meet perfectly in the center because their container and locations are moving with respect to the center of the screen. However, the logo button moves with respect to its original location, which is in the top left corner of the page. I don’t want to start the logo in the center of the screen because I would have the same issue in the other direction: i.e. getting the logo to move perfectly to its place in the header. I thought it would be easier to just center the logo in the middle during the animation, but the “move” command only moves elements relative to its default position. If I use VH and VW on this “move” command, the logo still won’t be centered because its default position is not aligned with the left or top of the page, so moving it 50% of the VW or VH will move it slightly past where it is supposed to be.
Hopefully you understand the issue, but let me know if you have any questions. You can play around with the desktop screen sizes to see the issue; it is more prominent on larger screens. Thanks!
Here is my public share link: LINK
(how to access public share link)