SVG Vectorial Graphics: Illustrate and Animate with Code

Animation along a stroke

A course by Javier Usobiaga Ferrer , Web designer

98% positive reviews (271)

9,110 students

Audio: Spanish

· ·

About the video: Animation along a stroke

Overview

“In this lesson we are going to define a trace and make the element that we want to animate through it. We will use JavaScript, although as I will explain, we will soon be able to use this type of animation also with CSS.”

In this video lesson Javier Usobiaga Ferrer addresses the topic: Animation along a stroke, which is part of the Domestika online course: SVG Vectorial Graphics: Illustrate and Animate with Code. Learn to create vector illustrations for your website, from basic lines to interactive animations.

Partial transcription of the video

“In this lesson we go to define a stroke and we are going to try that the object that we animate crosses that stroke. In this last example I recreated the animation that had done originally with Smile but in this case with GreenSock. For this I have a tag path with the trace that is visible, but might not be. If we remove the styles this same stroke we are collecting with JavaScript to define the movement of the circle. For this I used the GreenSock library, Twinmax and I needed Morph svg plugin which is the one that we had used in the previous demo. In the lines of JavaScript that I wrote n...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code

Level: Beginner
98% positive reviews (271)
9110 students
7 units
32 lessons (2h 2m)
6 downloads

Category
Web & App Design
Software
Adobe Illustrator, Sketch
Areas
Animation, Interactive Design, Web Design, Web Development

Javier Usobiaga Ferrer

A course by Javier Usobiaga Ferrer

Teacher Plus

Web designer

Javier Usobiaga is a Web Designer for 10 years and co-founder with Marta Armada Swwweet studio, specialized in designing responsive webs from the initial conception to the front-end development.

He also enjoys a lot in his facet as professor of Web Design in renowned workshops and schools like Elisava, IDEP.

Usobiaga understands the web as a whole, not only how beautiful it can be on the computer screen, but its usability in different devices and circumstances.

In his words "I think that as important as the aesthetic is how fast it charges or how well it responds, and I think that in our industry we often forget about that."