Change images on control scrub

[Volt 22]

Hello everyone,

 

Please how can I go about the interaction on the hero of this website? https://solluminaire.com.sg/product/voli/

What I want to achieve is slightly more different, I'll need to change the colors, maybe from blue to purple to red etc, as it is on https://near.sg/pages/linear-system.

I know I have to provide a codepen, but I'm not even sure where to start and that is why I don't have a pen to show now.
I just need to be pointed in the right direction, the best way to go about this. I'll provide a pen after that.

Thank you.

[GreenSock]

You could probably just layer several images on top of each other and then alter the opacity to transition between them. If you need that rotational dial interaction thing, you could use Draggable for that - it has a type: "rotation" feature. You could build a simple timeline with your crossfading images, pause() that, and then have the Draggable's onDrag adjust the progress() of that timeline based on the angle. 

 

Good luck!

[Volt 22]

Thanks a lot Jack. I'll try that out.