Jump to content
GreenSock

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

CSSPlugin - fontSize

Recommended Posts

Hi Guys,

 

So I am re-coding my work to use the GSAP TweenMax.js library and notice that

an animation effect that I had previously coded with fonts is no longer working.

 

I have a few html <buttons> that I was using this jquery code on to make the fontsize swell and retract

  $(".btn1").animate({fontSize: "24px"},700);
  $(".btn1").animate({fontSize: "20px"},900);

I switched it over to use GSAP, but this doesn't seem to work.. Sorry I don't have a codepen for this.

  TweenMax.to($(".btn1"), 0.7, { fontSize: 24, delay:4 });
  TweenMax.to($(".btn1"), 0.9, { fontSize: 20, delay:4 });

I have only played with GSAP for less than day, but seem to have other effects working, but I am not sure

why the code above doesn't work.  Oh BTW, I did try the  string version as shown below this line, as well.

  TweenMax.to($(".btn1"), 0.7, { fontSize: "24px", delay:4 });
  TweenMax.to($(".btn1"), 0.9, { fontSize: "20px", delay:4 }); 

On a seperate note, I was reading about CSSPlugins with TweenMax, I am using version 1.8.5 of TweenMax so I don't

think I need to do anything special in regards to using the CSSPlugin, in my code?

 

Thanks for your help.

Link to post
Share on other sites

Hi KerryRuddock :)

 

Looks like you've got 2 tweens happening at the exact same time and the second one that animates to a size of 20 has overwritten the first one. I'm assuming your starting font size is 20 so it looks like nothing is happening. Please try it like this:

TweenMax.to(".btn1", 0.7, { fontSize: 24});
TweenMax.to(".btn1", 0.9, { fontSize: 20, delay:0.7 });

or use a timeline like this:

var tl = new TimelineMax();
tl.to(".btn1", 0.7, { fontSize: 24});
tl.to(".btn1", 0.9, { fontSize: 20});

Hopefully that helps.

 

Happy tweening.

:)

  • Like 5
Link to post
Share on other sites

That fixed it.  Thank you so much for getting back to me so quickly.  Excellent.

  • Like 2
Link to post
Share on other sites

Hello KerryRuddock

 

If you do plan on animating font-size than its recommended to also use autoRound: false in your tween.

var tl = new TimelineMax();
tl.to(".btn1", 0.7, { fontSize: 24, autoRound: false});
tl.to(".btn1", 0.9, { fontSize: 20, autoRound: false});

This is because CSS properties like:

  • font-size
  • background-position
  • width
  • height

.. don't normally interpolate on a sub-pixel level.

 

Using autoRound will make sure the various browsers honor sub-pixel values.

 

autoRound is part of the CSSPlugin:

 

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

  • autoRound
    By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.

    If you need to animate numeric attributes (rather than css-related properties), you can use the AttrPlugin. And to replace the text in a DOM element, use the TextPlugin.

:)

  • Like 3
Link to post
Share on other sites

Thanks for the tip Jonathan.   So for comparison's sake I have my original codepen of fontSize animation

as well as the GSAP fontsize animation

 

The original animation uses jquery and defaults ease to a "swing" aka easeInOut (slow begin/end, fast middle)

 $(".btn1").animate({fontSize: "24px"},700);
 $(".btn1").animate({fontSize: "20px"},900);

The GSAP method is shown below, the 0.7 delay on the 1st tween is the time it takes prior animations

to complete that are not shown here.

 TweenMax.to(btn1, 0.7, {  fontSize: 24,  autoRound:false,  ease:"Power4.easeInOut",  delay:0.7   });
 TweenMax.to(btn1, 0.9, {  fontSize: 20,  autoRound:false,  ease:"Power3.easeInOut",  delay:1.4   });

Original Codepen without GSAP:  

See the Pen rLJPkq by KerryRuddock (@KerryRuddock) on CodePen

                   And with GSAP here: 

See the Pen QEmAwZ by KerryRuddock (@KerryRuddock) on CodePen

 

I am not sure why, but the GSAP fontSize animation seems so different to the original....

its almost like there is a pause between the swell and retract effects, yet I think I have

the delays set correctly.  Ideas anyone?

 

 

BTW: I will be showing this example ALOT as I progress with GSAP.

Link to post
Share on other sites

You might want to just narrow down both GSAP and non GSAP code examples .. since there is a lot of code to try and compare. It just needs to be a limited reduced codepen example.

 

Even the code example that you say uses GSAP is still using jQuery css() method. You should use GSAP set() method when setting CSS properties,, instead of jQuery css() method. This way your not changing CSS properties outside of GSAP.

 

GSAP set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

  • Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

:)

  • Like 1
Link to post
Share on other sites

The GSAP animation feels different because of the easing you have on the tweens. When you ease in and out of an animation it will naturally start slower, speed up and then end a little more slowly. Your first tween is ending slowly and the second one is starting slowly so it feels like it hangs for a bit.

 

You can solve this a few different ways. You could set an easeIn for your first tween and an easeOut for the second. Since you're bringing the size right back to it's original value, you could also use one tween and add repeat:1 and yoyo:true like this:

 TweenMax.to(btn1, 0.7, {  fontSize: 24,  autoRound:false,  ease:Power1.easeInOut, yoyo:true, repeat:1,  delay:0.7   }); 
// you can play with the eases to your liking

If you want to experiment with some eases, please take a look at my GreenSock Easing Playground:

 

See the Pen RaVEpP by PointC (@PointC) on CodePen

 

And don't miss the Ease Visualizer

 

http://greensock.com/ease-visualizer

 

Just my 2 cents worth - but you're starting to line up a lot of tweens and coding a lot of delays to get the timing right. I'd recommend using a timeline instead. Timelines make your life easier and are made for sequencing tweens.

 

I'd also echo Jonathan's advice about using GSAP to set() your properties.

 

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 2
Link to post
Share on other sites

 Jonathan,

 You are right, there is a a lot of code and sorry I wasn't clear enough, I am new to GSAP

 and this codepen I was previously referring you to is getting converted to GSAP -bit by bit. 

 

Which may be why you made a reference to me using jquery.css().  Yes I am, but not for any 'tweened' objects.

Any reference to .css is after tween-animation. 

 

I will keep in mind the TweenMax.set() method.  For now, I want my button tweens to use a delay for the effect.

 

 I took your advice to narrow down the problem, created a new codepen and see no evidence

of a - pause - between the 2 tweens used for my button's fontSize swell and retract effect.

 

See the Pen RRrYOO by KerryRuddock (@KerryRuddock) on CodePen

 

I am still,not sure what is causing a pause in my original codepen,  For now, I will move on

and look at this later.

 

 

Craig, 

Thanks for pen link and the visualizer link.  I was playing around eases in Visualizer yesterday, it works great.

 

I think I understand how the TweenMax.to()  duration and delay properties work. In my example below

I want the 2nd tween to trigger immdiately after the first tween is complete, I would set 2nd tween's delay

to be the time it takes to complete the 1st tween's duration.

 

A timeline sounds like the way to go when you need to work with many effects.

TweenMax.to(btn1, 0.7, {  fontSize: 24,  autoRound:false,  ease:"Power4.easeInOut" });
TweenMax.to(btn1, 0.9, {  fontSize: 20,  autoRound:false,  ease:"Power3.easeInOut", delay:0.7   });
Link to post
Share on other sites

Yep - you're calculating the delay correctly. Sorry - I didn't mean to imply that you weren't. :)

 

I was just looking at your pen and you had 4 tweens and each had a delay equal to the total duration of each preceding tween. That can certainly work, but when you change the duration of your first tween then you have to go and change all your delays. That's what makes a timeline so nice for sequencing. Change the first tween's duration and all the other tweens will adjust accordingly. That's just the beginning of the power of timelines.

 

I'm just trying to make your life easier. :)

 

Happy tweening.

  • Like 4
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.

×