Parallax effect animation with TweenMax (part 2)

This is the second part (and most recent) of a parallax tutorial and animation using GSAP TweenMax. Before we begin a little bit of theory behind the parallax effect.

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

Here’s an example of the final effect

See the Pen Parallax with Tweenmax by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

How to create a Codepen Like/Love button

So I have to admit that I’m using Codepen alot, I’m also liking their “love/like” button. So I set to recreate the effect.

This pen is still quite sought after and has received many “likes”

This is the end result

See the Pen Codepen heart by Michael Dobekidis (@netgfx) on CodePen.

Continue if you want to know how it was build.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Simple SVG animation with Greensock DrawSVG-Plugin

I had some free time and thought to experiment a bit with the new DrawSVG plugin from Greensock, it is a plugin that animates the border of an SVG, other parts of the SVG like fill or opacity could already be tweened via TweenMax/Lite.

Here’s a quick tutorial to get you started and I hope you’ll forgive my lousy Illustrator skills…

See the Pen OPNOgM by Michael Dobekidis (@netgfx) on CodePen.

Learn more about the SVG Plugin here: Greensock DrawSVG-Plugin

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Animated Ad with Greensock SplitText

Hello again, so I was asked to create an impressive Ad banner for a server company (a quite good one). Since most of the animation would involve letters I thought of the Greensock SplitText plugin.
And the result was extremely nice, it received over 1000 views on codepen in under 3 days.

Here is the animation in action, as always explained code follows.

See the Pen SplitText – Massive grid animation by Michael Dobekidis (@netgfx) on CodePen.

Find more info about SplitText plugin here:
http://www.greensock.com/splittext/

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

My game template on Codecanyon!

Finally I have had some free time and thought to try my luck with Codecanyon, which is a place were authors and coders get to monetize their works and for people to get some high-quality code/themes/templates/apps build-in and ready to go.

So I managed to “transform” my game of Easter-egg-hunting into a framework for gathering games (games where items drop and the player has to collect them) I added some code, removed much, and generalized the core to actually adapt and be manageable through a JS file that the user can alter to create his own game.

The template offers:

  • mobile and modern browser support
  • media-queries baked inside
  • responsive gameplay
  • auto pause when the player changes tab or browser loses focus
  • highly customizable options like: background, items, gathering image, score, etc…
  • High performace even on mobile devices, by using multiple canvases
  • And per frame collision detection
So check it out, and buy if you also want to create your own gathering game…

http://codecanyon.net/item/gathering-items-game-template-jquery-tweenmax/4525985

Note: The template uses jQuery, jQueryUI for dragging, and GSAP to manage animation and update functions per frame.

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Simple HTML5 Easter game [TweenMax as engine]

Logo Image

A happy HTML5 game for Easter, it was developed in under 8 hours with JQuery/UI, HTML5 canvas, and TweenMax from Greensock for the rendering and animation stuff.

Background is from April Wallpapers of Smashing Magazine!
Egg graphics are from MediaLoot freebie set of easter-eggs!

Font is Luckiest-Guy from Google web-fonts!

Tweet if you liked it, and feel free to comment here if you have any questions about the implementation or your high-scores!

EGG-HUNTER GAME!

As always… Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

ThreeJS camera control with TweenMax

Recently I started exploring the world of 3D, I mostly wanted to work in a familiar environment so I chose ThreeJS an excellent framework for 3D construction/animation with javascript. And of course I wanted to inject my favorite tool for javascript animation TweenMax.
So after a few examples and documentation reading I came up with a very simple example/tutorial of how to control various aspects of the camera in 3D space using TweenMax to animate properties and end-values.
For this example I also used the extremely helpful threejs boilerplate

You can view a DEMO here

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Image Gallery with TweenMax CSS3 effects and JQuery sauce

Recently Greensock added some new cool features to their animation JS Engine, these target specifically css3 animations and animating css3 properties.

So I thought to create a little demo showcasing some of these cool new features.

This Image gallery moves on 2 axis, horizontally for viewing different images and “vertically” or “in-time” if you prefer for viewing different galleries.

You can view a rough DEMO here

delorian

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Animating properties of injected SVG elements with TweenMax

Hello all, this post was somewhat inspired by the work of PJ.Onori and his blog post about SVG injecting and manipulation through javascript and css.

You can read more about his findings here: svg-css-injection

So after injecting the SVG inside the DOM I thought of why shouldn’t we try and animate it (no one likes static images right?), some simple things like change color gracefully, scale it or even programmatically create a simple animation of it.

I will show here how we can use simple tools like JQuery and TweenMax from Greensock and animate a simple SVG graphic.

View a DEMO here: AnimateSVG DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Image Slideshow with PreloadJS, JQuery and TweenMax

This is a tutorial about how to create a simple slideshow element with dynamicaly loaded images and some cool animations.
PreloadJS is a rather new JS library that aims to help with the loading of various assets, in our case it will provide us with the info of when the images are fully loaded and a value of percentage completion of this task.

DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin