How to Scale a Circular Background While Keeping an Image Fixed on Scroll in React?

[Santhosh02]

Sorry for not providing any code pen. I'm new to GSAP. I'm trying to do an animation like this website with yellow element scaling. But I don't know how to implement it. I've checked the documentation but the ScrollingTrigger property in not for free usage. SO how to achieve this animation otherwise. Any help on this would be appreciated.

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

ScrollTrigger is part of the public downloads and package. You do not need a club GreenSock membership in order to access it.

 

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. 

[Rodrigo]

Hi,

 

You can use clipPath:

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

 

This tool is super helpful:

https://bennettfeely.com/clippy/

 

Hopefully this helps.

Happy Tweening!