Jump to content
GreenSock

failure13

Menu line movement

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello failure13,

 

This is my take on that type of lava lamp menu effect:

 

My codepen example (hover & click events) :

See the Pen wubiq by jonathan (@jonathan) on CodePen

 

You are basically getting the:

  • width of the Anchor tag
  • left (offset of the UL containing DIV)
  • top is always the same value, so that is defined in the style sheet
  • and than passing those values to GSAP to() animate

It's just a simple to() tween, and animates just 2 CSS properties:

// adds sliding underline HTML to UL tag
jQuery('#menu').append('<li class="slide-line"></li>');

// animate slide-line on click
jQuery(document).on('mouseenter', '#menu li a', function () {
  
        var $this = jQuery(this),
            // get offset of hovered this
            offset = $this.offset(),
            //find the offset of the wrapping div  
            offsetBody = jQuery('#box').offset();
  
        // animate slide-line to clicked menu item
        TweenMax.to(jQuery('#menu .slide-line'), 0.5, {
            css:{
               width: $this.outerWidth()+'px',
               left: (offset.left-offsetBody.left)+'px'
            },
            overwrite:"all",
            // easing for overshoot
            ease:Back.easeOut
        });
  
}).on('mouseleave', '#menu li', function () {
  
        var $this = jQuery(this),
            // get the active menu selector
            $active = $this.parent().find("a.active"),
            // get offset of active menu item
            offset = $active.offset(),
            //find the offset of the wrapping div  
            offsetBody = jQuery('#box').offset();
  
        // animate slide-line to active menu item
        TweenMax.to(jQuery('#menu .slide-line'), 0.5, {
            css:{
                width: $active.outerWidth()+'px',
                left: (offset.left-offsetBody.left)+'px'
            },
            overwrite:"all",
            ease:Power4.easeInOut
        });
});

Of course the code in the example could be adjusted to animate x instead of left, and y instead of top. But you get the point...

 

Does that help?

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×