: What method to use to create opening animation for webpage I need advice on what program to use to create an opening animation for a webpage that looks similar to this: http://melaniedaveid.com/

@Debbie163

Peope are posting some good resources on the other answers. I just will sumarize your options.

Output formats:

SVG Can be animated inside the code with Javascript.

Canvas Also strong Javascript understanding is needed.

Animated gif It is a format that fits well your example. It is a resurected format that works fine on flat design animations.

CSS Probably using sprites.

Video Well. its a video.

Programs


Any vector program. Ilustrator, Corel, Inkscape.
A program for animation, After effects? (too much power for that)
Flash
Vectorian Giotto vectorian.com/giotto/ Make a sprite or layered aproach.
Or JavaScript coding.




Propbaby the safest bet is using an animated gif.

Vote Up Vote Down

@Jamie315

There are basically three things you can do, depending on your skills and what you want.


Make a video and set it to autoplay and hide the video player interface. Depending on how complex the animation will be, this might be the simplest solution, but it will result in the worst quality with the largest file size.
Do SVG-animation (like recommended by Eli). This requires a bit of coding, but you might be able to get a lot of work done in illustrator. Also this won’t do for very complex animations.
Use the canvas element and maybe a vector graphics framework like paper.js. This will require probably the most programming but in my opinion is the most elegant way (there wont be huge chunks of image information right in your HTML code like with the SVG way) and will give you the best quality. This also offers you almost endless possibilities because you can do all different kind of stuff like tracking the cursor and making the animation react to it.


Have a look at www.chromeexperiments.com — they are basically all based on the canvas element and give you an idea of what can be done with it.

I fear, if you can’t code at all and don’t want to learn it and have no one else who can do it, this won’t be a suitable solution. Its just: you can’t go very far on the web if you want custom stuff like animation and such without coding.

Vote Up Vote Down

@Reiling762

With illustrator you can draw the lines and then export the svg code to your website

To make an effect like this:
codepen.io/chriscoyier/pen/bGyoz
You can learn more about svg animation here css-tricks.com/svg-line-animation-works/

Vote Up Vote Down