Jump to content
Search Community

Change opacity of images onDrag

Volt 22 test
Moderator Tag

Recommended Posts

Hello everyone, 


I have 21 images stacked on top of each other, I want to change the opacity of the images on drag to reveal the image behind. For example

0% to 5% of drag should change the opacity of the first image to zero,

5% to 19% of drag should change the opacity of the second image, and so on.


I already have it working to some degree, but the result is inconsistent relative to the speed of dragging.

See the Pen PoyemoO by Iam_Jesse (@Iam_Jesse) on CodePen

Link to comment
Share on other sites

I think I'd create a timeline and use the dragger to update the progress. Using the handy mapRange utility to convert the minX and maxX position to a 0 → 1 progress should work well. Maybe something like this.


See the Pen KKGRmbP by PointC (@PointC) on CodePen


Hopefully that helps. Happy tweening.


  • Like 2
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...