Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hellol11

List hover effect not working

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 5
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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/

 

:)

  • Like 1
Link to post
Share on other sites

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.

Link to post
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.

×