0

I am trying to make a lava lamp style in jquery. It's working in codepen but not in jsfiddle or my own webpages. Can anyone help me figure out what the problem is?

Jquery code

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

// animate slide-line on click
jQuery(document).on('click', '#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(jQuery('#menu .slide-line'), 0.45, {
          css:{
            width: $this.outerWidth()+'px',
            left: (offset.left-offsetBody.left)+'px',
            top: (offset.top-offsetBody.top+$(this).height())+'px' 
          },
          ease:Power2.easeInOut
        });

        return false;
});

jQuery('#menu > li a').first().trigger("click");

Working demo codepen
Codepen demo

Not working demo jsfiddle / normal webpages
JSFiddle demo

Kevin Ammerlaan
  • 151
  • 1
  • 1
  • 11
  • It says in the console that TweekMax isn't defined. Where does that come from? – David Jones Oct 03 '14 at 10:46
  • I really have no idea I got the code from this original codepen http://codepen.io/jonathan/pen/wBDHA But I can't find anything about TweekMax in this code either? I am not a professional jQuery user so I don't understand anything of the code except it aint working on my webpage when it does work at codepen – Kevin Ammerlaan Oct 03 '14 at 11:06

1 Answers1

1

You are missing this library

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>

Just add it into the head section of your html.

David Jones
  • 4,275
  • 6
  • 27
  • 51