Expected Result:
I have a Nuxt3 app and a figma design file: See this Image First
My Problems:
1. How can I achieve this animation in a Nuxt child component when the window is scrolled?
- Change the
widthon browser scroll - Change the css
saturate()filter property on browser scroll
2. How can I slow down the speed of window scrolling and animate it?
- (CSS scroll behavior is smooth, but it’s too fast!)
- (NOTE: this website has a good smooth scrolling. How can I implement it in my Nuxt project?)
There are many packages available for Vue to accomplish this. Please feel free to suggest any of them while answering these questions.
Also, make sure to use Nuxt3 with Composition API (Vue3).
Thank you for your assistance!
Expected Result:
I have a Nuxt3 app and a figma design file: 
A lot of things here, focus on the animation part first. Maybe even in a simple HTML/CSS project initially before proceeding. This could probably be a good start. Do not look for a library first, try in a simple way first. If that doesn’t suit some complex needs (I doubt it), you could maybe reach to GSAP.