kcgsap Posted March 1, 2022 Share Posted March 1, 2022 Hello, I'm relative new to gsap and coding in general, yet I managed to create some cool animations. However I cannot pull this one off. I want to make the lines of code come down from the top of the screen to the end of the screen in a smooth way (Y). I'm stucked if you guys have some material/insights that can help me out, it would be great! Thanks in advance! Inspiration of this project / shout out to: gsap_test.svg See the Pen bGYQoRe by jfilipeferreira96 (@jfilipeferreira96) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted March 1, 2022 Solution Share Posted March 1, 2022 Hi @kcgsap Welcome to the forum. I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger. See the Pen mdqQxrO by PointC (@PointC) on CodePen For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this. See the Pen rNYQdGb??editors=0110 by PointC (@PointC) on CodePen If you need a primer on clipPaths and masks you can check out my training site. https://www.motiontricks.com/svg-masks-and-clippaths/ Hopefully that helps. Happy tweening and welcome aboard. 5 Link to comment Share on other sites More sharing options...
kcgsap Posted March 1, 2022 Author Share Posted March 1, 2022 18 minutes ago, PointC said: Hi @kcgsap Welcome to the forum. I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger. For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this. If you need a primer on clipPaths and masks you can check out my training site. https://www.motiontricks.com/svg-masks-and-clippaths/ Hopefully that helps. Happy tweening and welcome aboard. Thank you, the last example is just perfect! I will give it a try. And again thanks! Link to comment Share on other sites More sharing options...
kcgsap Posted March 5, 2022 Author Share Posted March 5, 2022 On 3/1/2022 at 9:32 PM, PointC said: Hi @kcgsap Welcome to the forum. I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger. For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this. If you need a primer on clipPaths and masks you can check out my training site. https://www.motiontricks.com/svg-masks-and-clippaths/ Hopefully that helps. Happy tweening and welcome aboard. Hello, I'm using Inkscape to create clipPaths however my browser does not read/show the items that belong to that group. Do you have any solution for that? Thanks! Link to comment Share on other sites More sharing options...
kcgsap Posted March 5, 2022 Author Share Posted March 5, 2022 It's fine I managed to edit your svg clipPath from a circle to a retangule and by doing that I got the clipPath working. It's just perfect! 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