Some related docs for draggable carousel

[Arad]

Hello Everyone, 
 

I hope you are all well,
 

Are there any references to help us to create something like this:
https://expanding-team-slider.webflow.io/. I'm more curious to read.
 

Included:

1. The preloader,
2. That hover Style,
3. Draggable carousel,
4. Mouse cursor,
5. Create a loop for the slider,
6. That feature clicks on the link and opens a popup with details.

Also, that would be great if you could share any separate things and similar ideas from Codepen, etc. 

I really appreciate any help you can provide.

[Rodrigo]

Hi @Arad and welcome to the GreenSock forums!

 

You can get some of those by just looking at the site in devtools.

1.  For the preloader I'd use a GSAP Timeline since the best approach IMHO is a mix of scaling the line, moving the container with the text from left to right at the same time using the position parameter and updating the number using the progress value of that timeline.
2. They use a saturate(0%) filter on the image on hover using just CSS no animation whatsoever for that.
3. There are quite a few examples of that
   

   See the Pen wvgaLxQ by GreenSock (@GreenSock) on CodePen

   
   

   See the Pen BaROoNj by GreenSock (@GreenSock) on CodePen

   
   

   See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

4. Again so many examples, but this one is the best starting point:
   

   See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

5. See #3
6. Flip Plugin: https://greensock.com/docs/v3/Plugins/Flip
   

   See the Pen XWKLYWe by GreenSock (@GreenSock) on CodePen

   
   

   See the Pen abZmqgW by GreenSock (@GreenSock) on CodePen

   
   

   See the Pen RwRbXKX by GreenSock (@GreenSock) on CodePen

Hopefully this is enough to get you started.

Happy Tweening!

[Arad]

I appreciate it so much ❤️