Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
- <script>
- jQuery(document).ready(function( $ ) {
- var $ovGooeyButtons=$(".ov-gooey-button")
- ,$toggleButton=$(".ov-gooey-toggle-button")
- ,menuOpen=false
- ,buttonsNum=$ovGooeyButtons.length
- ,buttonsMid=(buttonsNum/2)
- ,spacing=75
- ;
- function openGooeyMenu(){
- TweenMax.to($toggleButton,0.1,{
- scaleX:1.2,
- scaleY:0.7,
- ease:Quad.easeOut,
- onComplete:function(){
- TweenMax.to($toggleButton,.8,{
- scale:0.72,
- ease:Elastic.easeOut,
- easeParams:[1.1,0.7]
- })
- TweenMax.to($toggleButton.children(".ov-gooey-icon"),.8,{
- scale:1.4,
- ease:Elastic.easeOut,
- easeParams:[1.1,0.7]
- })
- }
- })
- $ovGooeyButtons.each(function(i){
- var $cur=$(this);
- var pos=i-buttonsMid;
- if(pos>=0) pos+=1;
- var dist=Math.abs(pos);
- $cur.css({
- zIndex:buttonsMid-dist
- });
- TweenMax.to($cur,1.1*(dist),{
- x:pos*spacing,
- scaleY:0.7,
- scaleX:1.1,
- ease:Elastic.easeOut,
- easeParams:[1.01,0.5]
- });
- TweenMax.to($cur,.8,{
- delay:(0.2*(dist))-0.1,
- scale:0.72,
- ease:Elastic.easeOut,
- easeParams:[1.1,0.7]
- })
- TweenMax.fromTo($cur.children(".ov-gooey-icon"),0.2,{
- scale:0
- },{
- delay:(0.2*dist)-0.1,
- scale:1,
- ease:Quad.easeInOut
- })
- })
- }
- function closeGooeyMenu(){
- TweenMax.to([$toggleButton,$toggleButton.children(".ov-gooey-icon")],1.4,{
- delay:0.1,
- scale:1,
- ease:Elastic.easeOut,
- easeParams:[1.1,0.3]
- });
- $ovGooeyButtons.each(function(i){
- var $cur=$(this);
- var pos=i-buttonsMid;
- if(pos>=0) pos+=1;
- var dist=Math.abs(pos);
- $cur.css({
- zIndex:dist
- });
- TweenMax.to($cur,0.4+((buttonsMid-dist)*0.1),{
- x:0,
- scale:.95,
- ease:Quad.easeInOut,
- });
- TweenMax.to($cur.children(".ov-gooey-icon"),0.2,{
- scale:0,
- ease:Quad.easeIn
- });
- })
- }
- function toggleGooeyMenu(){
- menuOpen=!menuOpen
- menuOpen?openGooeyMenu():closeGooeyMenu();
- }
- $toggleButton.on("mousedown",function(){
- toggleGooeyMenu();
- })
- })
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement