Develop Reference

How to animate blocks zig zagged linked by a line to be a straight line on scroll

Hi I have to animate using Javascript or somme kind of library (or CSS, whatever works best).
I am more of a PHP coder and I am not a Javascript expert. I am not exactly sure how to explain what I need so I am going to try explain it visually by adding a (badly drawn) picture:
I need help in how I can proceed with this, whether you can tell me what terms I can search for on Google, links to articles, anything will be appreciated.

Here a global list of what you can use to animate something (all of these combined with a scroll listener in your case)
Anime.js if you don't care about IE<11
Canvas also can be good option and has wide browser support
Keyframes used with classlist api to fire animation when it needed
Sometimes you can just change src of image to gif (without endless animation in your case)
I recommend you to just using GIF here if you can.

Javascript Animation Framework

I am looking for a javascript animation framework. I have found some:
http://www.pixijs.com/
http://phaser.io/
http://paperjs.org/
These all are good.
But I would like a GUI based animation creater framework, so that I can create translation, scale and frame animations. That will allow me easily create basic animations without having to write much code.
Something like cocos studio for cocos2d.
If you guys, know any such framework, please let me know. Thanks.

If you need some animations libraries, here are some good ones:
Greensock: https://greensock.com/
Velocity.js: http://julian.com/research/velocity/
If you want to create animations in a GUI, things to consider:
Adobe Edge (paid): https://creative.adobe.com/products/animate
Bouncejs: http://bouncejs.com/
CSS Animate: http://cssanimate.com/

I wrote a very simple library based on request animation frame that can basically animate anything you want as it only returns number values over specified time according to the specified easing.
https://github.com/alanbo/animate.js

I have created one, which is very simple and small
https://github.com/allenhwkim/jsanimation
Usage
import {slideInRight} from 'jsanimation';
slideInRight(el);

How do I draw my Box2D world using HTML5 Canvas instead of Debug Draw?

I know HTML5 canvas fairly well, I know the basics and animation using loops etc.
Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html
What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.
I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.
Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the image of a car? I just can't get my head around integrating canvas with Box2D.
Any tips will be massively appreciated!
Thanks

I spent the last few days trying the same thing.
I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:
var b = world.GetBodyList()
GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.
You can then use
b.GetPosition().x
b.GetPosition().y
b.GetAngle()
to retrieve the body's coordinates.
EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs

If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.
http://www.jeremyhubble.com/box2d.html

I had the same question.
here is the documentation of it.
You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.

How to make a rotating object (sphere, box, etc.) using only the canvas

I'd like to make a rotating object (sphere, box, etc.) using only the canvas. But I can't find a tutorial. Help If you saw somewhere or explain how to do it.
Like this example, only without any effects

Hope you like math. 3D effects can always be achieved on a 2D plane if you are willing to write some code.
Some resources that will probably help:
An Intro to Computer Graphics
and for help with the math,
A Book on Linear Algebra

Ah well it's pretty simple in theory. One way is to just set up a timer and then when it fires, clear the canvas and redraw your sphere, box whatever. To make it faster you can cover over a region of the canvas instead of the whole thing. Also you can get png sprites and move them about on the canvas.
I got into this stuff by trying out the pyjamas canvas wrapper, which means you can code in python and then compile it into js, which to me is a lot friendlier.
http://pyjs.org/examples/gwtcanvas/output/GWTCanvasDemo.html
NB the demo is slightly borken but the example code does compile and run perfectly well if you do a git pull.

jQuery/JS: Looking for a way to animate a cube in 3D perspective

I've been searching for a way to have a JavaScript animation (preferably using jQuery) behave like a rotating 3D cube, similar to this script:
http://keith-wood.name/imageCube.html
What stops me from settling with Keith's solution is the possibility for a more smoother and better transition between the images. Is it possible to make a more realistic version using only JS?
-Staffan

i've ended up using jQuery.imageCube but previously I've considered :
http://www.kawa.net/works/js/animation/cube-e.html
it's pure JS (no JQuery dependency) - I was able to somehow better understand "how it's done" from it.
although I'm not sure if it ain't still "jerky" just like imageCube ... :)