HOW TO CREATE THIS SLIDER

[Samsky]

Hi Gsap team, 

I would like to create the slider that is on this page https://env.studio/  

could you please point me in the right direction or give me clue on how to achieve this? 

Thanks in advance 

Sam 

[OSUblake]

Hi Samsky,

 

I don't see a slider on that page. Just a bunch of parallax effects kind of like this...

 

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

 

[Samsky]

if you scroll down the page you would see there's this slider.

for parallax effect i'm using locomotive scroll. so thanks for the suggestion 

[OSUblake]

So what do you need help with? It's just animating two images inside a container. If you need help understanding something, and assuming the animation isn't canvas based, you can usually inspect the elements to see what properties they are animating. Change the z-index, animate the front image up, and scale the back image down.

 

 

[Samsky]

Thanks osublake

could you please recommend some sources and courses where I could grasp and learn more about Gsap, 

I honestly feel like a noob everytime I have to ask for to solve a simple problem.

 

thanks again 

 

 

[OSUblake]

@Carl has a lot of excellent courses.

https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

And for GSAP examples, I usually like to search CodePen. 

[GreenSock]

Yep, @Carl does a great job of teaching all the core concepts (plus advanced ones too). I'd highly recommend his courses. 👍

[Samsky]

Alright, thanks. I'll check it out. Looking forward to this.