A few months ago I launched a Motion Graphics blog call Motion Design Love. Now it’s been a few months and it’s fairly established i thought that it would be a good opportunity to give the site a refresh in terms of the design. So check out the first phase of the new design below and let me know what you think!
Been using Cinema 4D and the Mograph module recently. Thought i’d post my first test render featuring a cube with a cloner object and a random effector.
Recently I won the Video Rock motion graphics collection from Harry Frank over at Gray Machine. This is just a quick video testing out some of the elements from that collection.
Retro! from Matthew Carlin on Vimeo.
I’ve just been messing around with some kinds of text animation in after effects, thought i’d post this one up as i thought it looked pretty good!
Text Animation from Matthew Carlin on Vimeo.
Time for another jQuery Quicktip. This time, the fade function. I’ve been having to use the fade function on a site recently, so i thought i’d share a quick tip.
Like most of jQuery, it’s pretty simple to apple the fade function to an element.
First of all we wait for the DOM to be ready, this should be familiar:
$(document).ready(function(){
});
Now we’ve done that we use the built in fade function to fade the element up;
$("#picture_holder").fadeTo("slow", 1.0);
});
We’ve used the example with an id of “#picture_holder” in this example. The first property in the brackets after the the fadeTo function is the speed of the fade, here you can use the term slow or fast or alternatively use a number (remember to remove the ” ” around the slow text) the second property is the opacity of what it is going to fade to, in this case 1.0 is an opacity of 100%, with 0.5 being 50% percent and so forth.
If you want to fade an element in from load then you need to set its opacity before hand. This is easy to do in jQuery too:
$('#picture_holder').css('opacity', 0);
This sets the “#picture_holder” to have an opacity of 0%. We put this before the the fade statement and the the opacity will fade from 0% to 100% .
The full function is:
$(document).ready(function(){
$('#picture_holder').css('opacity', 0);
$("#picture_holder").fadeTo("slow", 1.0);
});
Have fun!