Jump to content

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

Timeline like tunnel animation - ScrollTrigger

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Thanks 1
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.