Hello all, I haven’t posted in a while but this is an effect that I think deserves a place in here. What this effect does is to make tweening of nodes and the lines connected to those nodes move as well. I’m using Phaserjs for this and depending on your version of the browser it will show as either WebGL or Canvas.
Without any further delay here is the final effect
See the Pen Phaser interconnecting nodes by Michael Dobekidis (@netgfx) on CodePen.
See the Pen Phaser interconnecting nodes x3 by Michael Dobekidis (@netgfx) on CodePen.373
Continue to code break down and tutorial
I just released my PhaseSlider UI component, which is a (duh!) Slider with many options and functionalities, take a look at the Github repo: https://github.com/netgfx/PhaseSlider
View the example here for advanced: http://www.netgfx.co…s/example1.html
or here for basic example: http://www.netgfx.co…ples/index.html
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.
Lately I have been using Phaser.io as a game framework/engine. And one thing that is quite tedius, is to manage your Sprites and animation frames, it is roughly 40% of your game development time.
However there is one tool that now -that officially supports Phaser- cuts down this time at least by 90%.
View more info or download TexturePacker here: https://www.codeandweb.com/texturepacker
The tool is named TexturePacker and allows the load of all your assets and combines them very conveniently into a single Spritesheet and exports that Spritesheet along with a .json file that “tells” Phaser where to find each frame (based on coordinates on the spritesheet), this is called an atlasJSONHash/atlasJSONArray.
I have attached a video showcasing a very rough export that I will use to create today’s codepen example (see below).
Here is the end result of our game.
See the Pen OPpgZw by Michael Dobekidis (@netgfx) on CodePen.
Continue to see details about creating a Player and animations with atlasJSONHash.
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
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:
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
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
A tutorial for creating an animated circle imitating Google+™ circles effect, which includes drag & drop (Jquery UI) functionality and the animating power of TweenLite/Max (greensock).
Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.
!Note: best viewed with a modern browser as I used css3 for the shapes.
Check it out: http://www.netgfx.com/trunk/animateJS/
Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/