1

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

I am most familiar with adobe illustrator and am not familiar with coding. I'm wondering if creating the animation as a gif in illustrator would be the way to go? I want to be sure that it isn't going to be an issue with the webpage loading.

What program would be best for a beginner to use to illustrate an animation and what format for a webpage?

Thank you

  • 1
    Going along with Eli's answer. I would check out the JS library maxwellito.github.io/vivus. This might be difficult if you're not familiar with coding but maybe you can figure it out! – AndrewH Jun 24 '15 at 16:28
  • 3
    What came to mind was lazylinepainter.info – Joonas Jun 24 '15 at 16:52
  • 1
    While the example isn't bad, note that 'opening animations' are rather passé at best and annoying at worse. Use them extremely sparingly. – DA01 Jun 24 '15 at 17:23
  • The linked page uses CSS3 and HTML5 for its animations -- technical knowledge required :) – Hanna Jun 25 '15 at 0:55
  • 1
    @PieBie Edge Animate was my first though, before I saw the example animation. I'm not entirely confident that it would be easy to use EA to animate lines like that (or possible..?), especially if it's not all drawn inside EA. Then again, I haven't used it much. – Joonas Jun 25 '15 at 8:19
2

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

To make an effect like this:

http://codepen.io/chriscoyier/pen/bGyoz

You can learn more about svg animation here https://css-tricks.com/svg-line-animation-works/

0

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

  1. 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.
  2. 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.
  3. 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 https://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.

0

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 http://vectorian.com/giotto/

  • Make a sprite or layered aproach.

  • Or JavaScript coding.


Propbaby the safest bet is using an animated gif.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.