Background change like pixel Box when scorll

[Bigyan32]

I've found a reference site for scroll animation, but I'm unsure how to create this effect. You can check it out here: https://webisoft.com/advisory#:~:text=APPLICATION. In the services section, you'll notice that the animations change depending on whether you scroll up or down.

 

Here is the CodePen example. I'm experiencing an issue with the scrolling effect. Can anyone help me with this?

See the Pen ByyVyGw by bigyan32 (@bigyan32) on CodePen.

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

[mvaneijgen]

Hi @Bigyan32 welcome to the forum!

 

There are probably hundreds of ways to build this animation, just depends on what you're comfortable with, but the stagger object is probably your best friend in this, the demo on the docs almost already does what you want https://gsap.com/resources/getting-started/Staggers/

 

Hope it helps and happy tweening! 

[Bigyan32]

1 hour ago, GSAP Helper said:

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

I have added the CodePen link with the code I used to try and recreate the effect.

[mvaneijgen]

Looks good! Happy tweening!