Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Parallax / 3d effect with layered images

Recommended Posts

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 :D

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


See the Pen wEvgGP by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

Not sure if you need help with GSAP or if this question is more about creating a responsive layout with 3D depth.


Perhaps this demo and thread can help


See the Pen 663cb04165ff7ba1515014844b2e251f by osublake (@osublake) on CodePen




in addition a google search for GreenSock Lerp Your Way to Glory will yield some good results. Pay particular attention to any posts from @OSUblake and videos from Keith Peters / Coding Math



  • Like 5
Link to comment
Share on other sites

Hi @kreativzirkel,


I'm not sure if you expect something like this:


See the Pen XPWRwo by mikeK (@mikeK) on CodePen

The scaling factor, the size of the big box is not calculated correctly.


Best regards



Grüße nach Düsseldorf.



  • Like 3
Link to comment
Share on other sites

Damn– deadline is pushing so hard, that this feature has been pushed to the next round.

I'll can't wait to look into the lerp and mathematic coding stuff, thank you very much guys. 


Thanks for the pens; I'll look into this again when I get some air to breath–


(looking forward to show you what we've done this time 8))



Grüße aus Köln diesmal ;)



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.