Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Endry

How to move the elements in svg/canvas background following mouse over

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×