Clock Shaped Slider

[Sıradışı Digital]

Hi, 

 

Example Url : https://www.moonsafari.archi/

 

I want to make a slider on this page. I think I can do it with gsap. But since I'm new to gsap, I didn't know where to start. Can you help me with this?

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

This 'slider' isn't really a slider, it's a scrollTriggered series of animations. I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Also this article is a good place to start learning

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi @Sıradışı Digital and welcome to the GreenSock forums!

 

The effects and the images are being animated using canvas, most likely WebGL and perhaps even shaders. That is not an easy effect to achieve, but not impossible.

 

I'd encourage you to check these resources in order to learn more about this effects and how to implement them with GSAP:

https://tympanus.net/Development/webGLImageTransitions/index.html

https://gl-transitions.com/

 

Happy Tweening!!!

[Sıradışı Digital]

@Rodrigo Thank you. Very good examples to start.