The image and code pen illustrates best what I need to achieve.
Of course my designers want to animate the reveal with a parallax effect.
I had one approach using scale and xPercent, but failed horribly
Then I tried transformPerspective and actual z-translation, which worked pretty nice. The further the elements get away, the factor in which they get smaller increases and feels natural. Spreading the elements in one direction worked aswell.
But my solution has the following problems:
– it is not responsive; using x and y results in only one viewport width where the distance between the elements is perfect
– visually the whole construct should feel centered, which probably will be the case when the first and last element have similar padding to the outside
– the amount of elements that spread on in that range need to be flexible aswell (in my case 2-6 elements, but once a system is found it probably will be able to do more elements)
I guess with some more math and optics knowledge this is rather easy, .. but I'm really struggling to get this right.
Any ideas, fellas?
Thank you guys!
PS: the max size of 32kb is quite inconvenient; :F