Val Head is totally into design, type, code, coffee & the internet.

New Processing Workshop: Printed Code!

February 3rd, 2013 | posted in: events

spacer

I’m super excited to announce a new workshop for later this month. It’s going to be a fun one! In two Thursday evenings we’ll create some generative artwork in Processing and then head to the print studio to make it into a two-colour silkscreen art print.

No prior printing experience is required and ticket costs include all the printing supplies and studio time. It’s a great chance to get a little creative with some code and make something physical too. Perfect for designers and artists with a little coding experience or developers looking to try something new.

I’ll be providing starter code for you to work from and we’ll walk you through the file preparation and printing process step by step.

Grab your ticket or check out the full workshop details. Registration is limited to a max of 8 people to keep things casual and fun.

Processing: From Code To Print
Feb 21st and 28th

Shoot me an email if you have any questions about the workshop.

Tutorial: Using animation-fill-mode In You CSS Animations

January 4th, 2013 | posted in: css

If you’ve been working with CSS animations a bit and are curious about animation-fill-modes, this little tutorial and screencast will fill you in on all the details.

Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. It’s not pretty. You can use animation-fill-mode to smooth these out without having to write extra CSS to match your first or last keyframe styles.

Animation-fill-mode can be set to: none (default), forwards, backwards, or both. The values are a heck of a lot easier to remember when you see some examples.

See some examples in action:

CSS Animations: Using animation-fill-mode from val head on Vimeo.

A note on prefixes: I’m only using the -webkit vendor prefix in the screencast to save space and make things easier to follow. I’m sure you’ve been reminded a million times by now that you should include all the necessary vendor prefixes, via whichever method you prefer, for actual production work. Animations are 500% more awesome when they work in browsers made by multiple vendors spacer

The Cliff Notes Version:

Forwards – An animation-fill-mode of forwards will extend the styles from the last keyframe of your animation to play beyond the duration of the animation. This is perfect if you want to animate something moving from one place to another and have it stay there.

/*using prefix free here so it's all nice and easier to read*/ body {margin:3em 10%; background:#737373;} .ball { animation-name: ballmove; animation-duration: 2s; animation-iteration-count:1; animation-timing-function: ease-in-out; animation-fill-mode:forwards; } @keyframes ballmove { 0% {transform: translateX(0) rotate(0);} 100% {transform: translateX(450px) rotate(2turn);} }


Check it out on codepen

backwards – An animation-fill-mode of backwards will extend the styles from the first keyframe of your animation backwards into the duration of an animation delay you have set for the animation. If you want whatever you’re animating have the same styles that the animation will start with during a delay, backwards has you covered.

body {margin: 3em 10%; background:#737373;} .ball { animation-name: ballmove; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-delay:1s; animation-fill-mode:backwards; } @keyframes ballmove { 0% {transform: translateX(100px) rotate(0);} 20% {transform: translateX(-10px)rotate(-.5turn);} 100% {transform:translateX(450px) rotate(2turn);} }


Check it out on codepen

both – An animation-fill-mode of both combines the results of both backwards and forwards. The styles from your first keyframe will be used during any animation delay and the styles from your final keyframe will persist past the end of the animation.

/*using prefix free here so it's all nice and easier to read*/ body {margin:3em 10%; background:#737373;} .ball { animation-name: ballmove; animation-duration: 2s; animation-iteration-count:1; animation-timing-function: ease-in-out; animation-fill-mode:forwards; } @keyframes ballmove { 0% {transform: translateX(0) rotate(0);} 100% {transform: translateX(450px) rotate(2turn);} }


Check it out on codepen

« Previous Entries |

Recently Posted

New Processing Workshop: Printed Code!
February 3rd, 2013

Tutorial: Using animation-fill-mode In You CSS Animations
January 4th, 2013

2012 In Review
January 1st, 2013

Workshops

  • Making Things Move With CSS3 & JS
  • Intro to Creative Coding With Processing

Articles On Other Sites

  • 24 Ways - Giving Animations Their Place
  • .Net Top CSS Sites Of 2012
  • Get More Out Of Your CSS Transitions With jQuery
  • More Efficient CSS Transitions
  • Responsive Typography

Talk To Me

  • @vlh
  • email

Archives

(RSS)


51
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.