Create the effect of a line drawing itself

A cool effect is to sequentially display a line, so that it appears as if the line is drawing itself. I originally learned this technique in Macromedia Flash, but you can do it in PowerPoint as well. The one limitation is that you need a solid, single-color background.

Here’s what it looks like.

You can download the PowerPoint file itself here.

In addition to making the graph appear to draw itself, a second animation makes the word “Math” follows the graph. This animation was for a presentation my son gave in math class, “Math in the Market,” about moving averages and other mathematical equations that people use to determine when to buy or sell an investment. My son’s idea was to represent the title of the presentation as literally as possible. This animation was on the first slide and he wanted it to loop as he introduced the topic.

Here are the steps to create this animation in PowerPoint:

  1. In PowerPoint 2003, on the Drawing toolbar, choose AutoShapes> Lines> Line or Freeform. In PowerPoint 2007 and 2010, go to Home> Drawing group> Shapes drop-down arrow> More button> Lines category.) Draw a line or a group of lines that is mostly horizontal or mostly vertical. (You can use a diagonal direction as well.) To draw a series of lines iIn PowerPoint 2003, double-click the Line button on the Drawing toolbar. In 2007 and 2010, go to Home tab> Drawing group, right-click the Line button, and choose Lock Drawing Mode.
  2. In PowerPoint 2003, from the Drawing toolbar insert a rectangle that completely covers the line or lines you just drew. In PowerPoint 2007 and 2010, go to Home tab> Drawing group, and click the Rectangle button.
  3. Right-click the rectangle and choose Format> AutoShape (Shape). In PowerPoint 2003, click the Colors and Lines tab. In PowerPoint 2007 and 2010, click the Line Color category. Set the Line color to No Line.
  4. Set the Fill to the same color as the background of the slide. I used a white background, the default, and a white rectangle. If you don’t have a solid background, choose Background or Slide Background.
  5. Click OK/Close to return to your slide. Notice that the rectangle has disappeared, but you can see its handles. Now, you’ll animate the rectangle so that it uncovers the lines.
  6. In PowerPoint 2003, choose Slide Show> Custom Animation. In PowerPoint 2007, choose Animations tab> Custom Animation. In PowerPoint 2010, choose the Animations tab.
  7. In PowerPoint 2003 and 2007, in the Custom Animation pane, click Add Effect> Exit> Fly Out. In PowerPoint 2010, click Add Animation and choose Fly Out from the Exit section. If you don’t see that animation, choose More Effects. From the Basic section, choose Fly Out and click OK
  8. From the Direction/Effect Options drop-down list, choose To Right. (If your line goes mostly vertical, you might choose To Top or To Bottom. Other directions are available as well.) From the Speed drop-down list, choose Slow. (In 2010, set the duration to 3 seconds or so.) If you want the animation to start automatically, choose After Previous from the Start drop-down list.
  9. To loop the animation, select the rectangle’s animation in the task pane and choose Timing from its drop-down list. (To display the task pane in PowerPoint 2010, click Animation Pane on the Animations tab.) From the Repeat drop-down list, choose Until End of Slide. Click OK.
  10. Click the Play button on the Custom Animation task pane (or Preview on the Animation tab in 2010) to see the animation or click the Slide Show button to view it in slide show mode.

How did I get “Math” to move along the line? It’s just a text box with a motion path. I explain motion path animation in another tip. I found that the Draw Custom Path> Curve worked best, by clicking at each vertex of the chart line. From the Start drop-down list, I chose With Previous and from the Speed drop-down list, I chose Slow.

However, there were two little problems:

  • When I added the text box and its motion path (which I created to follow the graph), it was on top of the rectangle, so I had to change the order of the rectangle bring it to the front, by right-clicking and choosing Order> Bring to Front. (In PowerPoint 2007/2010, right-click and choose Bring to Front.) However, it helped to temporarily send the rectangle to the back (Order> Send to Back/Send to Back) while I was creating the text animation.
  • The motion path animation seemed to race ahead of the Fly Out animation, and then the text would disappear behind the rectangle. Unfortunately, PowerPoint only offers a few speed options, such as very slow, slow, medium, etc. However, you can enter your own speed in the Speed textbox to get the result you want. A speed of 3.5 seconds worked well. I also repeated this animation until the end of the slide.

18 comments to Create the effect of a line drawing itself

  • robin

    really thank you for your useful post

  • Sherri Mellinkoff

    This link just brings me back to this page I’d like to see the animation; I have Flash player installed, but the link seems to be broken.

  • Sherri,
    Thanks for bringing that to my attention. I fixed the animation, plus updated the tip so that it includes PowerPoint 2010.

  • diana

    cool i used it today thanks

  • Jack

    Am I missing something, why would you just not use the WIPE entrance effect (from LEFT in your case) to draw the line. That seems much simpler.

  • Dinasha Perera

    Hello, im a bit confused about where to find the rectangle button (for powerpoint 2007 and 2010)

  • You can find shapes on both the Home and Insert tabs.

  • THANKZZ. IT HELPED A LOT!!!

  • ANIL TONY JOSE

    THANKS MADAM,ACTUALLY WE ARE SEARCHING FOR THIS ARTICLE ONLY.IT WILL BE MORE HELPFUL TO OUR COLLEGE PRESENTATIONS

  • Thank, I have drawed the apple shape with this tutorial

  • jay

    You said…
    “In PowerPoint 2007 and 2010, go to Home> Drawing group> Shapes drop-down arrow> More button> Lines category.) Draw a line or a group of lines that is mostly horizontal or mostly vertical. (You can use a diagonal direction as well.) To draw a series of lines iIn PowerPoint 2003, double-click the Line button on the Drawing toolbar. In 2007 and 2010, go to Home tab> Drawing group, right-click the Line button, and choose Lock Drawing Mode.”

    Not sure what version of 2010 you’re talking about but mine has none of this and I have Office Professional

  • Let’s start at the beginning.
    Do you have a Home tab?
    On that tab, is there a section (group) called Drawing?

  • shivendra

    please guide stepwise on “how to draw a moving curve in the same way?

    thanks

  • BG

    Informative post. Thank you.

  • Omardz

    hi Ellen is there a video Tuto or a tutorial with picture plz

  • In the post, I have a video showing what it looks like and also a link to download the PowerPoint file istself.

  • Ellen – many thanks – I’m doing a great deal of pitching and presenting these days, and even though I’m a fan of keeping presentation slides VERY simple, every once in awhile I want a little something extra. Seems like my Google searches often end up here, and I usually find something really workable. Keep up the good stuff!

  • Sau

    “In PowerPoint 2007 and 2010, go to Home> Drawing group> Shapes drop-down arrow> More button> Lines category.”

    I do not see a “More Button” in “Shapes drop-down arrow”… am i missing something simple?

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>