EdgeDial – a Responsive UI Dial And Image Slider For Edge Animate


As you may have read in a previous post, Envato commissioned me to create two Edge Animate Templates. The first is EdgeSlider, which is proving to be very popular, in part thanks to the amazing capabilities afforded to it by GSAP (Greensock Animation Platform).

I think the thing that makes it (and other EA templates) popular is the fact that visual developers (like me) like an IDE in which to lay stuff out, prototype ideas quickly and get an immediate feel for how something might work. Edge Animate is perfect for this in that assets can be managed, edited, stored and instantiated very easily. The code behind it can be as complex or as simple as it needs to be but the IDE allows some very powerful editing capabilities for templates like this.  Want more slides? Add them to the library and add an array value for it. Simple.

Introducing EdgeDial – A Responsive UI Dial And Image Slider

Like EdgeSlider I’ve taken the same approach for EdgeDial – you can edit the icons (the number of them and the design), the slider images, the triggered animations, the eases, the timings, if the animation re-triggers; pretty much everything in fact; and (I hope) it’s great fun to use and simple to customise.

And because I’ve come from a Flash background these are all created with the visual designer/developer in mind – visual editing and pixel perfection is a snap with Edge Animate’s UI and the buttery smooth performance and 3D grunt is supplied in spades by Greensock GSAP (even on tablets and mobile devices).

In the words of Ferris Bueller – ‘I’ve said it before and I’ll say it again‘ – the combination of Edge Animate and Greensock is THE winning formula for anyone coming from Flash or who is a visual developer or who wants to take the web further and break away from the monotonous Facebook-esque UI drudgery that is slowly sucking the life out of the our souls.

So come with me – let’s charge forward and inject some much needed life back into the web. Not everything has to be about page views and hits and traffic and stats and unique impressions and all that jazz. The web is losing something that it used to have and that something is fun and it’s our job to resuscitate it and bring it back from the brink. (Ok that’s a bit melodramatic but you get my drift).


(and yes that’s even more melodramatic but I can’t stop myself now!)

View the EdgeDial Demo

Purchase EdgeDial

EdgeDial as an Edge Animate Template on CodeCanyon at the stupendously redonkulous price of only $8. I know. Mental.

Purchase EdgeDial
Purchase EdgeDial

5 thoughts on “EdgeDial – a Responsive UI Dial And Image Slider For Edge Animate

  1. Thank you for sharing this, Ive been following the workflow of using edge animate in greensock because I come from flash need a visual idea instead of css. One question I had for you is as far clean code/code bloat and file weight size how does using Edge affect those two aspects.

    1. Hi Dwayne,

      Although Edge Animate is not so new now it’s constantly going through improvement cycles. I think the EA dev team (and, in fact, any dev team) would agree that there’s always room for streamlining code in a product and Edge Animate is no different.

      EA is currently using jQuery 2.0.3 which is, of course, a dependency and dependencies are always going to add an overhead (usually with the benefit of shorter production time).

      My stuff always uses Greensock which is another dependency but rest assured, Jack’s code is the programming equivalent of a racing snake – slight, light and quick.

      For example, without the images (which you can compress down to whatever you like), EdgeDial is 60K for GSAP and my code plus 200K for the EA libraries and jQuery. So 260Kb in total.

      It’s not perfect (especially in a mobile environment) and there’ll always be room for improvement but it’s still a relatively young product. And who knows – maybe EA will eventually lose all dependencies and just run with pure JavaScript meaning that the final size will be much smaller.

  2. Okay, i love all the posts u have, one question…how do I apply your desgin and work to wordpress….. newbie here :S

    and Greensock….i had it in my pc for 4 months now, a business package, don’t know how to install to wordpress… hahaha

    but, that stuff is rocking just by looking at their examples… help me !!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s