Jump to content
Search Community

easing and text color is not working in my tweenmax code

George Carlin test
Moderator Tag

Go to solution Solved by Carl,

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



$(document).on("mouseenter", "#numbers", function(){
    TweenMax.to(footer_number, 0.5, {
        css:{fontSize:new_footer_number_fontSize+"px"},
        textShadow:"2px 2px 15px rgba(145, 233, 0, 1)",             
        color:"#91ff00",
        ease:Power4.easeOut
    });
});
$(document).on("mouseleave", "#numbers", function(){
    TweenMax.to(footer_number, 0.5, {
         css:{fontSize:old_footer_number_fontSize+"px"},
         textShadow:"0px 0px 0px rgba(0, 0, 0, 0)",             
         color:"#d6d6d6",
         ease:Power4.easeOut
    });
});


am i doing something wrong?

Link to comment
Share on other sites

Hi George Carlin  :)

 

pls check CSSPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

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.

//as of 1.8.0 the following lines produce identical results:
TweenLite.to(element, 1, {top:"20px", backgroundColor:"#FF0000", ease:Power2.easeOut});
//longer, less convenient syntax:
TweenLite.to(element, 1, {css:{top:"20px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});
  • Like 2
Link to comment
Share on other sites

  • Solution

Yup, Shaun is correct.

 

The issue is related to the fact you are wrapping the fontSize in a css:{} object but not the others.

This means those other properties are NOT being passed off to the CSSPlugin. 

 

Our advice is to not wrap any properties in the css object unless you are demanding the absolute best performance under lots of stress (hundreds or thousands of concurrent tweens).

 

GSAP is smart enough to know that if target of a tween is DOM element that the properties should be passed off to CSSPlugin without you using the css wrapper object. Try changing your code to

 

$(document).on("mouseenter", "#numbers", function(){
    TweenMax.to(footer_number, 0.5, {
        fontSize:new_footer_number_fontSize+"px",
        textShadow:"2px 2px 15px rgba(145, 233, 0, 1)",             
        color:"#91ff00",
        ease:Power4.easeOut
    });
});
$(document).on("mouseleave", "#numbers", function(){
    TweenMax.to(footer_number, 0.5, {
         fontSize:old_footer_number_fontSize+"px",
         textShadow:"0px 0px 0px rgba(0, 0, 0, 0)",             
         color:"#d6d6d6",
         ease:Power4.easeOut
    });
});

This way fontSize, textShadow and color will all be passed through CSSPlugin.

 

As Shaun recommended, fontSize may look a little weird as each time the size changes the text will be re-flowed with new kerning and I'm pretty sure browsers round to whole pixel values too. It can look a little jittery.

 

 

  • Like 2
Link to comment
Share on other sites

I believe this to be your problem "css:{fontSize:new_footer_number_fontSize+"px"}," ... you can just tween the property itself

 

fontSize: new_footer_number_fontSize+"px"

 

But, I would opt for tweeting the scale property before the fontSize property.

 

See the Pen qdGjdX?editors=001 by sgorneau (@sgorneau) on CodePen

SCALE is the best option to use, thank you.

I left the fontSize behind.

Link to comment
Share on other sites

 

Hi George Carlin  :)

 

pls check CSSPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

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.

//as of 1.8.0 the following lines produce identical results:

TweenLite.to(element, 1, {top:"20px", backgroundColor:"#FF0000", ease:Power2.easeOut});

//longer, less convenient syntax:

TweenLite.to(element, 1, {css:{top:"20px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});

 

so if I had several tweens, I need to either put all of em in css (if it is seriously necessary) or don't us css at all. Am I right?

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...