Hello, is there any tutorial on how to animate the ‘dashboard elements’ like in this example?
I understand that it’s just a bunch of cropped out UI elements, but how to make all of them fit in place, and be responsive?
Would you use the grid or what kind of layout
Maybe there is a tutorial on this? Appreciate it!
I find it’s best to design everything as shown in the completed view. Designed for all responsive views. Then work on the interactions as the final step, using a reverse-engineering approach for the movements.
I’d probably use absolute positioning to recreate this layout, due to the layering of elements and mix of positions.
Thank you, trying to replicate it with absolute position, and just adjusting the margins?
You will use the move action.
Your example movements are very simple horizontal and vertical with separate timing and speed. If you need perfect alignment, create the entire graphic in Photoshop (or tool of choice) with each element on a layer. Output each individual layer, maintaining the full composition pixel dimensions with transparency.
In Webflow, set each image to Absolute positioning and stack accordingly with z-indexing. If your pixel dimensions are all the same, the composition should line up as shown in Photoshop.
With the comp in place, you can start creating the move interactions as desired.
You will need to set overflow=hidden on the parent div that’s holding all of the image files.
