Jump to content
Search Community

List hover effect not working

hellol11 test
Moderator Tag

Go to solution Solved by Rodrigo,

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

  • Solution

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 comment
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 comment
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 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.
×
×
  • Create New...