Leo Dahal Posted January 11, 2021 Share Posted January 11, 2021 I am a very beginner to GSAP, I am a Junior frontend developer and I want to learn more to develop my skill sets. Can anyone help me for knowing using which plugin can I animate my components like in this website first animation??? https://www.accenture.com/us-en/about/company-index This is just for learning purpose. Link to comment Share on other sites More sharing options...
mikel Posted January 11, 2021 Share Posted January 11, 2021 Hey @Leo Dahal, Welcome to the GreenSock Forum. You could use an SVG clipPath for the img, morph the clipPath into different forms (GSAP morphSVG) and then trigger it scroll-related (GSAP ScrollTrigger). Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 11, 2021 Share Posted January 11, 2021 Adding to what mikel said, I'd Create a timeline that animates the elements in the way that you need to animate them. In this case animating a clip-path is the way to go. You might be able to get away with just scaling the clip-path elements and not have to morph them, but if you need a more complicated transition using MorphSVG is the way to go. Use ScrollTrigger to attach your timeline's progress to the scroll position of the page. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now