Change opacity of images onDrag

[Volt 22]

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

[PointC]

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.

[Volt 22]

Wow, very elegant solution Craig.

 

Thanks a lot.

[Cassie]

oooooh pretty