Scroll effect

[gierreggi]

Hi, how could I achieve this effect when scrolling, in which the main section remains fixed and some elements and the section below scroll above, like in this website https://www.jomor.design/?

 

 

Thank you

 

 

 

[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://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. 

[gierreggi]

Sorry, a lot of time i red some post like this in this forum, i think was a place where is possible talk about possible solutions with gsap.

 

I apologize for breaking the forums laws.

[Rodrigo]

Hi,

 

There are no laws on these forums, the main problem with this type of questions is time constraints. Creating an effect like that could range from something extremely simple to extremely complex, depending on the moving parts and all the elements/parts you want/need to add to it.

 

Take this for example:

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

 

This is the simplest way to achieve something like this, but that predicates on every section's height being the screen height. As soon as you change that, the entire dynamic of the solution changes as well and gets more complicated and it requires more time, time that unfortunately we don't have. We love helping and challenges are a crucial part of being a developer, but we have a very active community that requires our attention and we can't burn a lot of time in a single thread and dismiss several others in the process.

 

Here are another examples with other approaches to this. This one uses different heights on each section that gets pinned:

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

 

This one pins just some sections:

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

 

Hopefully these demos provide a good starting point. If you get stuck with a GSAP related issue, please feel free to post in the forums and we'll have a look and help you with it.

Happy Tweening!