Jump to content
Search Community

Parallax / 3d effect with layered images

katerlouis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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!

 

 

Greetings,

René 

❤️

 

 

PS: the max size of 32kb is quite inconvenient; :F

gsap.jpg

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

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 ;)

 

René

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.
×
×
  • Create New...