Jump to content
GreenSock

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

A function to control the opacity of the element flowing on z-axis

Recommended Posts

I'am trying to create an image gallery, where images flow on z-axis. I am able make image div to flow on z-axis using scrolltrigger. But what I wanted, was to control the opacity of div to go from 1 to 0 when the image div (class name as "square") is close to camera/ viewport (for this code it is z = 700)  so it will have a fade effect.

In short whenever any one of these five image div goes z = 700 the opacity should be 0 .

 

In style.css I've used perspective attribute for 3d perspective which will allow me to have images to flow on z-axis.

 

I got this idea from awwwards.com 

original concept for reference:   http://ab-architects.nextpage.agency/public/

 I am trying to create gallery like this but cant figure out how to control the opacity in between the timeline animation... any suggestions on how I could achieve this effect using timeline and keep the scrolltrigger.

 

Thanks in advance 

See the Pen vYmBmrg by dexterscode (@dexterscode) on CodePen

Link to post
Share on other sites

Hey @DexteRs Code,

 

Maybe you could implement this logic with two stagger-tweens at a proper time

 

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

 

Happy tweening ...

Mikel

  • Like 4
  • Thanks 1
Link to post
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.

×