I am trying to move an image from its location to the exact middle of the screen. The page is responsive so exact movements wont work because the image location changes based on screen size.
The image is a fixed 225px. Theres 4 images in a 100vw, even spaced flex div.
I’m looking for each image to appear in the middle of the screen then move to its location one by one.
Does anyone have any advise on how to use interactions to accomplish this?
So which one is the interaction you want?
They are one in the same. The element needs to move from Centered on screen (or section) to its original position. I figured it is easier to manipulate the element’s location to the center of the screen, then to manipulate from the center out.
Moving the element back from the center is as easy as setting the X and Y to 0 px shift.
It is not the same. It is impossible to move element with ix exactly to the center of anything and retain responsibility. But it is easy to put an element into the center from beginning but then just set it’s initial state to, say, move by x-axis 100% and action would just move it back to 0%
Its the same problem then. The moment the responsive nature of the page comes into play, the percentages change. Moving a 280px width object 100% on a 992 display is a lot different than moving it on a 1920 display.
The only option I can think of is using the interaction to resize everything into VH and VW variables, move the element, then resize back. Only problem I have encountered with this is the interactions tend to bug. The resizing from VH/VW to PX will cause the element to resize to 1px then grow to the size.
If you initially place your element of whatever size inside, say, flex div set to center children then it doesn’t matter what size your element is - it will always end up in the center.