List hover effect not working

[hellol11 2 Likes (Newbie)]

As you can see in the attached codepen, I want to make a small hover effect. after looking through some docs on both Jquery and GSAP, it still is not working. Is there something I'm doing wrong?

See the Pen NNzzYo?editors=1010 by hellol11 (@hellol11) on CodePen

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

I believe that the issue is on your jquery code. My impression is that you're kind of over-complicating the code. Is simpler like this:

var listItems = $("#list li");

listItems.each(function(i,e){
	
  var t = TweenLite.to(e, 0.5, {fontSize:30, paused:true});
	
  e.fontTween = t;
	
  $(e).hover(function(){
    e.fontTween.play();
  },function(){
    e.fontTween.reverse();
  });
	
});

See the Pen PNaaMX by anon (@anon) on CodePen

[CraigWheatley 49 Likes (Newbie)]

Hi there!

 

Firstly, if you're using TweenMax, you don't need to reference the CSSPlugin

 

Secondly, the tag name you're checking for is coming out as "LI" not "li". 

Those to quick changes and it works:

 

See the Pen GZGBKY?editors=1010 by craigster1991 (@craigster1991) on CodePen

[Jonathan 5,176 Likes (Superhero)]

I think you meant to use css:{} instead of CSSPlugin:{}

// so this:
TweenMax.to(ev.target, 0.5, {ease:Power2.easeInOut, CSSPlugin:{fontSize:30}});

// becomes this wrapping your CSS properties with a css:{} object
TweenMax.to(ev.target, 0.5, {ease:Power2.easeInOut, css:{fontSize:30}});

Wrapping your CSS properties with css:{} object is total acceptable. But if you don't want to, GSAP is smart enough to know your intent regarding CSS properties.

 

Also if animating font-size, add autoRound: false to make sure the browser animates it on a sub-pixel level.

 

Note about css:{} wrapper

• Originally, css-specific properties needed to be wrapped in their own object and passed in like TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); so that the engine could determine the properties that should be funneled to CSSPlugin, but because animating DOM elements in the browser is so common, TweenLite and TweenMax (as of version 1.8.0) automatically check to see if the target is a DOM element and if so, it creates that css object for you and shifts any properties that aren't defined directly on the element or reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, easel, etc.) into that css object when the tween renders for the first time. In the code examples below, we'll use the more concise style that omits the css:{} object but be aware that either style is acceptable.

Resource:

GSAP CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

[hellol11 2 Likes (Newbie)]

Hi,

 

I believe that the issue is on your jquery code. My impression is that you're kind of over-complicating the code. Is simpler like this:

var listItems = $("#list li");

listItems.each(function(i,e){
	
  var t = TweenLite.to(e, 0.5, {fontSize:30, paused:true});
	
  e.fontTween = t;
	
  $(e).hover(function(){
    e.fontTween.play();
  },function(){
    e.fontTween.reverse();
  });
	
});

See the Pen PNaaMX by anon (@anon) on CodePen

This is really interesting. I am new to jquery, so this is some new code to me.