radial menu with TweenMax.js

A cool toggle radial menu with TweenMax.js from COIDEA

STEP1:
LINK jq library and tweenmax.js

STEP2:
html

The navigation contains the trigger buttons for toggle and the menu lists.

STEP3:

css

The trigger button placed at the absolute position.

Each line of the trigger button animates delay.

The same animation with close button. And When trigger button is opened, the lines inside trigger dispear with delay animation.

Each list of menu has different gradient background color.

The same changes when hovering the menu list.

STEP4:

Initial all the DOM we need.

With TweenMax.js ,it's first to set a timeline for all the animation.

TweenMax.to(target,duration,vars)

An ease controls the rate of change during tween. There are several ways to ease ,such as back,elastic,bounce and so on.

More TweenMax.js Documents HERE

CodemySite_Web development