Endry Posted December 5, 2020 Share Posted December 5, 2020 Hi everyone. I try to do animation for svg elements. Here's what I did - jsfiddle The problem is that svg photos can be different (as small as 100-500 lines of code, or large as thousands of lines). For what we have now, we need to have svg directly in the DOM. And if the svg file consists of several thousand lines of code, the animation will load the system and will not work smoothly (jsfiddle) So I think we need svg, turn it into canvas and then work with it. If they were ordinary primitive figures (circle, triangle, square) and they would meet once on the page, I could draw them in canvas. But the problem is that these can be different forms of drawing. I thought it would be great if we could svg load a certain mask and display circles in it, which would be animated following mouse over. Such a mask could be made as a single path(mask). However, frankly speaking, I don't know how to do this or if it's possible to do it.I would be very grateful for any help and examples. Thank you. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2020 Share Posted December 5, 2020 Hey Endry and welcome to the GreenSock forums. This is indeed a better task for Canvas than SVG. With large or complex shapes you're bound to have performance issues. As for how to create such a thing, I'm afraid I can't help you more than tutorials and such online will help you because I've never created something like this before. If you have any questions about how to use GSAP itself please ask and we'll do our best to help. Link to comment Share on other sites More sharing options...
Endry Posted December 7, 2020 Author Share Posted December 7, 2020 On 12/5/2020 at 3:21 PM, ZachSaucier said: Hey Endry and welcome to the GreenSock forums. This is indeed a better task for Canvas than SVG. With large or complex shapes you're bound to have performance issues. As for how to create such a thing, I'm afraid I can't help you more than tutorials and such online will help you because I've never created something like this before. If you have any questions about how to use GSAP itself please ask and we'll do our best to help. Thank you for taking the time to answer me. Ok, I will google what to read on this topic. If you have any questions about GSAP, I'll write here. Thank you very much. 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