I need to learn animation is SVG or JS Dom better

Question

I tried both but don't know total

Answer 1

WebGL is what you're looking for. It's JavaScript using the canvas element so if you have a browser & a text editor you already have everything you'll need. But the thing is you'll need to learn quite a bit of linear algebra even if you end up using libraries extensively for your projects. However, you can do a whole lot of incredible things once you figure it out.

Unfortunately a lot of books (& much of the online content) on this are quite hard to read for people new to programming as the content often mirrors that of OpenGL, but you can get away with learning at your own pace through practice with some algebra & the WebGL basics.

Answer 2

I am assuming you want animations for your web codes or web pages etc , if so

1.SVG easiest alternative, with <animate> attribute

2. little bit of html and CSS can also help you make awesome animations, by defining Ur own animations in CSS using-

@keyframes myAnim{
//ur animation rules here
}
and animation property

3. if wish to do logic based 2d animations then need to use html5 canvas and solid knowledge of JavaScript, ( a lot of games and cool animations u ll find in SoloLearn are from canvas 2d)

4. if want 3d animations for ur web codes then need to use canvas with webGL , (its pretty tough and will require lots of study for setting up ur 3d parameters)

I ll suggest to progress in the given order , it ll be easier this way , reply if looking for good resources

WARNING: if u dive straight into canvas , or webGL , without basic JavaScript and programming logics then it would be nerve wrecking and overwhelming

Answer 3

hey anyone

Answer 4

this is an example of an SVG animation:

<svg width="1000" height="250">
<rect width="150" height="100" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="2s" fill="freeze" repeatCount="1"/>
</rect>
</svg>

Answer 5

also, you can easily learn it in the html tutorial.