ankit_hingarajiya Posted July 31, 2020 Share Posted July 31, 2020 I saw this effect a lot of times (But its hard to inspect this effect) - (first section We are building more ...)https://www.kanarys.com/about i dont't no how to create like this type of animation any one help me Please. Thank you in advanced. Link to comment Share on other sites More sharing options...
PointC Posted July 31, 2020 Share Posted July 31, 2020 Hi @ankit_hingarajiya Welcome to the forum. I think Zach is working on an awesome answer for you, but I'll jump in with my two cents. That website seems to be using canvas, but you can pull off the same effect with a SVG. The trick is making a duplicate shape and text layer. The duplicate shape is placed into a clip-path and that clip-path is applied to the duplicate text. Something like this: See the Pen XWXvpBd by PointC (@PointC) on CodePen You'd then just hook the movement of the revealing element to the scroll with ScrollTrigger. You can make it work with a mask too. I have a couple masking/clipping articles which may help. https://www.motiontricks.com/invert-svg-text-with-a-mask/ https://www.motiontricks.com/svg-masks-and-clippaths/ Here's one of the examples from the articles. See the Pen 3eec7a76275575b63995ff7e364473e7 by PointC (@PointC) on CodePen Hopefully that helps a bit. Happy tweening and welcome aboard. 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 1, 2020 Share Posted August 1, 2020 Apparently I wrote this answer but never hit "submit"... Hey Ankit and welcome to the GreenSock forums. That sort of effect is done with clipPaths/masking with layers. Here are some similar threads: Link to comment Share on other sites More sharing options...
ankit_hingarajiya Posted August 3, 2020 Author Share Posted August 3, 2020 Hello All I have try to create animation Please suggest me if any change See the Pen yLemGoJ by ankithingarajiya (@ankithingarajiya) on CodePen Thank you Link to comment Share on other sites More sharing options...
PointC Posted August 3, 2020 Share Posted August 3, 2020 The only change I'd recommend is using ScrollTrigger instead of ScrollMagic. https://greensock.com/docs/v3/Plugins/ScrollTrigger 2 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