Jump to content
Search Community

Recreate the image scroll effect with GSAP

momo12 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Guys I have a question. on the demo website of Locomotive https://locomotivemtl.github.io/locomotive-scroll/ You can see the background image is moving a bit while we scroll up or down (Parallex Effect)

 

I have no idea what should I do. Any suggestion or example would be appreciated!

See the Pen yLjKmja?editors=1010 by talewoy290 (@talewoy290) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

The easiest way to achieve that is with ScrollSmoother:

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

 

Also this can be done with ScrollTrigger but is not exactly the same effect:

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


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

 

Happy Tweening!

Link to comment
Share on other sites

15 minutes ago, Rodrigo said:

Hi,

 

The easiest way to achieve that is with ScrollSmoother:

 

 

 

Also this can be done with ScrollTrigger but is not exactly the same effect:

 

 

 

 

 

Happy Tweening!

I mean something like this https://tympanus.net/codrops/2022/08/03/large-image-to-content-page-transition/ I think that's different from what you have showed me ... Isn't it? @Rodrigo

The first few seconds show a smooth effect of how the background position changes

Link to comment
Share on other sites

You mean when you scroll or when you click an image?

 

For the scrolling they are using Lenis, it says so in the article:

Quote

For the smooth page scroll we are using Lenis and GSAP’s Flip plugin lets us easily animate the large image to its place in the content area.

 

You can achieve the same effect with Smooth Scroller for what is worth, using the native scroll bar.

Link to comment
Share on other sites

3 minutes ago, Rodrigo said:

You mean when you scroll or when you click an image?

 

For the scrolling they are using Lenis, it says so in the article:

 

You can achieve the same effect with Smooth Scroller for what is worth, using the native scroll bar.

Thanks, I'm getting confused now!! :)) I used Locomotive and GSAP for something ... Now can't change the smooth scroll library. 

I made some changes to the Codepen. Could you please have a look? It's not running ... Thanks a lot!

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...