Web Animation Techniques (Full-day) Workshop by Val Head

Refresh Tallahassee is a community of web and mobile design and development professionals with a desire to help each other create better user experiences.

Refresh Tallahassee

Motion design is quickly becoming a necessary skill for anyone working on the web today. Designers and developers across the web are embracing the the power of web animation to engage and communicate.
This workshop will get you started with the essentials of web animation. It covers the basics of motion design theory as it applies to the web, and how to use animation to improve the user experience. In addition to the theory, we’ll use hands-on exercises to explore the similarities and difference of animating with CSS, JavaScript, and SVG. You’ll leave knowing how to bring your work to life with motion in meaningful ways and which web animation tool to use to get it done.
This workshop is for front end developers and web designers looking to dig into the code side of web animation while making quality motion design decisions for their work. 
<H2>What You’ll Learn</H2>
Animating in CSS vs JavaScript Using hands-on code exercises we’ll look at what animation tasks each of these are best at, how to choose between the two and how they can work together.
Animation and performance Animation can have both real and perceived effects on performance. We’ll cover which properties browsers can animated most efficiently and how to improve perceived performance by adding animation.
Where animation can improve UX A quick look at the specific design problems animation can solve through providing feedback, exposing causality, orientation, showing relationships and demonstrating.
Classic animation techniques worth stealing The “12 classic principles” and other useful animation techniques. We’ll look at the short list of ones matter most and how they translate to UX and the digital space.
Principles of interactive animation There is more to consider than just the classic principles for interface animation. Animation should never get in the way of the task at hand. Val will show you how to be sure you’re animations are interruptible, non-blocking, and appropriately timed for interaction.
SVG Animation Basics We’ll animate SVG via CSS and Greensock and cover the most foolproof ways to animated SVG despite differences in browser support. 
<H2>What You'll Need For the Workshop</H2>
No prior experience with web animation is required, but a solid foundation in HTML and CSS is recommended. Familiarity with JavaScript is helpful but not required.
A laptop with a text editor and a current version of Chrome or Firefox will be needed to participate in the workshop exercises. A (free) Codepen.io account will also be helpful. We’ll be using that for the exercises and demos. 
<H2>About Val Head</H2>
Val Head is a web animation expert, author, and Design Evangelist at Adobe. She is the author of <A HREF="http://rosenfeldmedia.com/books/designing-interface-animations/" TARGET="_blank" DATA-MSYS-CLICKTRACK="0" REL="nofollow noopener noreferrer">Designing Interface Animation</A>, published by Rosenfeld Media, teaches <A HREF="https://www.lynda.com/CSS-tutorials/CSS-Animation/439683-2.html" TARGET="_blank" DATA-MSYS-CLICKTRACK="0" REL="nofollow noopener noreferrer">CSS Animation</A>on <A HREF="http://lynda.com/" TARGET="_blank" DATA-MSYS-CLICKTRACK="0" REL="nofollow noopener noreferrer">lynda.com</A>, and curates the weekly <A HREF="http://uianimationnewsletter.com/" TARGET="_blank" DATA-MSYS-CLICKTRACK="0" REL="nofollow noopener noreferrer">UI Animation Newsletter</A>.
 
<HR>
 
Anyone who signs up as an "Early Bird" will also be entered into a drawing to win a signed copy of Val's Designing Interface Animation book. Also, we'll have coffee and snacks on hand before the workshop starts and lunch provided during the afternoon break.

Domi Station

Our {communityGuidelinesLink} describe the sort of content we prohibit on Eventbrite. If you suspect an event may be in violation, you can report it to us so we can investigate.

To report other categories of prohibited or illegal content, submit {link}

Web Animation Techniques (Full-day) Workshop by Val Head

More events from Refresh Tallahassee

Discover more events from Refresh Tallahassee, from Business to other experiences you might love.

Still looking for the right event?

Explore all events in Tallahassee and filter by date, category, and more to find the perfect fit.

Web Animation Techniques (Full-day) Workshop by Val Head

More events from Refresh Tallahassee

Discover more events from Refresh Tallahassee, from Business to other experiences you might love.

You might also like...

Browse more events with different dates, prices, and formats to find your next great experience.

Still looking for the right event?

Explore all events in Tallahassee and filter by date, category, and more to find the perfect fit.