Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Samsky

HOW TO CREATE THIS SLIDER

Recommended Posts

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 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 

Schermafbeelding 2021-10-29 om 18.15.38.png

Link to comment
Share on other sites

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.

 

image.png

 

  • Like 1
Link to comment
Share on other sites

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 

 

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×