More possibilities of animation effects with TweenMax.js inspire me in the project.
Github DOWNLOAD
Step1:
link jq library ,TweenMax.js
And fontAwesome.css for this demo
Step2:
html
Seperate the screen to four blocks.
When trigger the menu button, the menu show up.
Step3:
CSS
menu-block is actually the full screen which contains four blocks.
Set the position of each block and the backgound color.
Initialize the width of each block to 0%,so that the animation starts from 0 to each block’s percentage of width.
Step4:
js
With tweenmax.js, the first is to initialize a timeline.
Each block animates the width to 25% in 1.2sec with Power4.
Menu list bounces in from the top in 0.9 sec.
And the timeline is reversible.
Another Menu example with TweenMax.js read
👉Follow me for more useful web development content! love sharing🥰
