Help me to fullfilled my requirment

[Sanju Antala]

The idea is this - when the “slope” gets into a view port, trigger the animation.

The slope angle will gradually change as shown on this mockup attached.  

 

See the Pen PodLwQq by sanjuantala (@sanjuantala) on CodePen

[mvaneijgen]

Hi @Sanju Antala welcome to the forum! 

 

You could do this in several ways, but the easiest in my opinion is with a clipPath. I've used https://bennettfeely.com/clippy/ to generate two clipPath's and then use GSAP to tween between them. You have to make sure that the in and out put of the string you use in GSAP is the same as your CSS. I like to just put a % after each number (sometimes https://bennettfeely.com/clippy/ doesn't do that) 

 

See the Pen MWqxwOZ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

And if you want things to happen on scroll! Use ScrollTrigger! (ScrollTrigger docs) While starting with an animation it is beter to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

See the Pen dyqroWY?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Sanju Antala]

@mvaneijgen 
Thank you. 🏆

 

Really appreciated your work.