How to create parallax effect with gsap?

[IndM]

On 7/15/2020 at 10:11 PM, ZachSaucier said:

Like I said before, you could just reposition the fixed elements (change the top values to larger ones).

 

Alternatively you could use one of the other methods that we've already linked to and embedded. For example:

 

 

@ZachSaucier Hi! How would I make this work with images that are larger than the section?

For example: the image has a height of 700px and set as background just like the code above. The section is 300px. How can I make the position from the image started from the center and not the top?


 

[Rodrigo]

Hi @oasis,

 

This example of the ScrollTrigger collection uses background images and background position for the parallax effect:

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

 

If that is not what you're looking for, please create a new thread or post a minimal demo that clearly illustrates what you're trying to do and what the issue is.

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[Aditya Sutar]

On 7/6/2020 at 9:33 AM, GreenSock said:

How to add these effect in NextJS code can anyone help please

 

 

 

 

 

 

 

 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

Here is our ScrollTrigger starter template for NextJS:

https://stackblitz.com/edit/nextjs-5cm4qn

 

This should provide a good starting point for this.

 

Also take a look at the resources in this page in order how to use GSAP in React/NextJS apps: