February 3rd, 2013 | posted in: events
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.
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.
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
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 |