Timeline like tunnel animation - ScrollTrigger

[alexpahomi]

Hi! I'm looking for suggestions. I want to create a presentation with different images that should be animated on scroll, like going thru a tunnel.

I want 4-6 images to be visible at a given time and images scaling up from top center(like we go towards them). You can see my try in codepen. For now I don't know how to stagger the images so they will come multiple at once(maybe timeline with '-=0.5' as 3th param), how to make them go past by screen nicely. Any ideas will be welcomed.

See the Pen XWjrjaJ by alexpahomi (@alexpahomi) on CodePen.

[ZachSaucier]

Hey alexpahomi and welcome to the GreenSock forums.

 

The truest way to do this sort of thing would be to use WebGL and actually move planes through 3D space.

Second to that, you can use CSS's 3D perspective to do something similar.

After that you can fake 3D perspective simply by cleverly placing elements outside of of the viewport and animating and scaling it cleverly.