Jump to content
Search Community

What is this called?

FuzzCod test
Moderator Tag

Recommended Posts

Hello, so I am building my portfolio and of course I am using this amazing library. But I have a question.

When you look at these websites.

 

https://bepatrickdavid.com/

https://www.rezo-zero.com/

 

You have this smooth scroll, what is the correct name for this? In example 2 when you scroll the images you get a kind of 3D feel, the images are further back than the text? How do I get this? How can I get the smoothness and 3D feel? Can someone point me to another topic perhaps?

 

Thanks.

Link to comment
Share on other sites

Hey FuzzCod and welcome to the GreenSock forums.

 

22 minutes ago, FuzzCod said:

You have this smooth scroll, what is the correct name for this?

It's called smooth scrolling :) 

 

22 minutes ago, FuzzCod said:

In example 2 when you scroll the images you get a kind of 3D feel, the images are further back than the text?

That's called parallax.

 

23 minutes ago, FuzzCod said:

How do I get this?

GSAP's ScrollTrigger can help you create all of the above and more! Check out the docs for a lot more examples. For the smooth scrolling, look at the .scrollerProxy() method.

  • Like 2
Link to comment
Share on other sites

I'm assuming by 3d feel you mean elements moving vertically at different speeds. This is referred to as parallax.

 

Here is a simple example using gsaps scrollTrigger

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

 

Setting this type of thing up on a complex page will take some work and at least intermediate if not advanced gsap knowledge so if you're new to the platform you should probably familiarize yourself with it before immediately trying to jump into something like this.

 

The getting started page is the best place to start:

 

 

 

 

 

 

  • Like 3
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.
×
×
  • Create New...