Lava Lamp Style Menu using GSAP - Hover Events

Developer
Jonathan Marzullo
Size
2,490 Kb
Views
60,720
  1. Lava Lamp Style Menu using GSAP - Hover Events Previews
  2. Lava Lamp Style Menu using GSAP - Hover Events HTML Codes
  3. Lava Lamp Style Menu using GSAP - Hover Events CSS Codes
  4. Lava Lamp Style Menu using GSAP - Hover Events JS Codes

How do I make an lava lamp style menu using gsap - hover events?

Regarding GreenSock Forum Post: http://forums.greensock.com/topic/9030-menu-line-movement/. What is a lava lamp style menu using gsap - hover events? How do you make a lava lamp style menu using gsap - hover events? This script and codes were developed by Jonathan Marzullo on 11 August 2022, Thursday.

Lava Lamp Style Menu using GSAP - Hover Events Previews
IQ Test

Lava Lamp Style Menu using GSAP - Hover Events - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lava Lamp Style Menu using GSAP - Hover Events</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 style="margin-left:15px;">Lava Lamp Style Menu using GSAP - Hover Events</h2>
<p style="margin-left:16px;">hover over a menu item to see the animated underline:</p>
<div id="box">
<ul id="menu"> <li><a href="javascript:;" class="active">menu</a></li> <li><a href="javascript:;">long menu</a></li> <li><a href="javascript:;">even longer menu</a></li> <li><a href="javascript:;">short menu</a></li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lava Lamp Style Menu using GSAP - Hover Events - Script Codes CSS Codes

body { color:#555; margin:20px 0 0 10px;
}
#box { position:relative; height:40px; margin:0 0 0 0;
}
ul{ margin:0; padding:0; display:block;
}
li { float:left; margin:0; list-style-type:none; padding:0; padding:5px 20px;
}
li a { display:block; text-decoration:none; font-weight:bold; font-family:Arial; color:#222;
}
li a.active { color:#CC0000;
}
#menu li.slide-line {	display: block; padding:0; margin:0;	background: none #CC0000;	position: absolute;	top: 0; width: 43px; height: 6px; left: 0; top: 0; z-index: 0;
}

Lava Lamp Style Menu using GSAP - Hover Events - Script Codes JS Codes

// adds sliding underline HTML
jQuery('#menu').append('<li class="slide-line"></li>');
// set initial position of slide line
TweenMax.set('#menu .slide-line', { css:{width: 43, x: 20, y: 30}
});
// animate slide-line on click
jQuery(document).on('mouseenter', '#menu li a', function () { var $this = jQuery(this), offset = $this.offset(), //find the offset of the wrapping div offsetBody = jQuery('#box').offset(); // GSAP animate to clicked menu item TweenMax.to('#menu .slide-line', 0.7, { css:{ width: $this.outerWidth()+'px', x: (offset.left-offsetBody.left)+'px' }, overwrite:"all", ease: Back.easeOut.config(1.7) });
}).on('mouseleave', '#menu li', function () { var $this = jQuery(this), $active = $this.parent().find("a.active"), offset = $active.offset(), //find the offset of the wrapping div offsetBody = jQuery('#box').offset(); // GSAP animate to clicked menu item TweenMax.to('#menu .slide-line', 0.7, { css:{ width: $active.outerWidth()+'px', x: (offset.left-offsetBody.left)+'px' }, overwrite:"all", ease:Power4.easeInOut });
});
Lava Lamp Style Menu using GSAP - Hover Events - Script Codes
Lava Lamp Style Menu using GSAP - Hover Events - Script Codes
Home Page Home
Developer Jonathan Marzullo
Username jonathan
Uploaded August 11, 2022
Rating 3
Size 2,490 Kb
Views 60,720
Do you need developer help for Lava Lamp Style Menu using GSAP - Hover Events?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jonathan Marzullo (jonathan) Script Codes
Name
3D Cubes
Cross Browser Animating a Radial Gradient Tween - GSAP ColorPropsPlugin
CSS Opacity using autoAlpha - GSAP
GSAP and HTML5 Canvas
Zoom in an image and show a div on hover
Typing Effect using CSS3 Animation
CSS Filter Test - Grayscale
Basic GSAP Image Slider Test
CSS background-size - GSAP
GSAP Animate CSS background-position
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!