Ways of defining elements for animations

[GVI02]

Hello there,

 

hopping everyone is having a great day. Web animations are a new world for me, which I've had a lot of fun exploring in the past few weeks. I've started a few small projects and have a lot more ideas. Each time I start one I find myself at this weird crossword where I know how I want to animate an object but I'm not sure what that object should be, should I make a canvas, an svg, maybe a div, or just slap a jpeg and call it a day. So I am here, yet again, in the GreenSock Forum seeking knowledge. Which way of doing things is best in what situation?

[ZachSaucier]

Hey GVI02 and welcome!

 

What type of object you should animate depends 100% of your needs. I regularly animate DOM elements, SVG elements, Canvas objects, and WebGL objects with GSAP. It can handle the animation of any object in JS  

 

What you should be asking yourself is: what am I animating? And what format works best for that sort of animation? We're happy to point you in the right direction if you're unsure.

[GVI02]

Hmm I gravitate towards svg, I don't know why. I am thinking about making a coordinate system where you can animate different functions, points and such. What would you recommend for this>

[ZachSaucier]

Sorry. that's too abstract to give a recommendation. What's it for? Will you have any assets - if so, what type? 

[GVI02]

My main idea is to be able to draw a curve based on  a given formula, but I'm not sure how to do it. I can solve the function for a punch of values and draw points at each on a canvas, or maybe I can do something with svg paths and bézier curves.

[ZachSaucier]

32 minutes ago, GVI02 said:

My main idea is to be able to draw a curve based on  a given formula

Depending on how many formulas you're wanting to support that's quite an undertaking  I might recommend using an existing plotting library.

 

Most likely I'd use canvas in that context.