Question

Currently I’m making a banner in html5/javascript (also a way of learning for myself, it’s still relatively new to me) and I’m using the tweenlite library. I’m experimenting what the best way of making banners is in html5, so I’m trying out all these different plugins to make the same banner. Now it’s Greensock’s turn with its new GSAP v12.

I hope it’s clear that atm I don’t want to use anything other than TweenLite/Max for this solution. I also can’t even if I wanted to (file size limitations).

So now my problem. I’m trying to make a text slide in and fade-in at the same time. The sliding is working perfect and was easy enough but the fading doesn’t seem to be doing anything.

Here is the part of the code (note that I made it a fade-out for now, easier testing):

TweenMax.to(ctxTitle, 0.5, { ypos:titleToYpos, css:{alpha:0}, ease:Power2.easeOut, onUpdate:loopTitle });

function loopTitle() {
  ctxTitle.clearRect(0, 0, width, height);
  ctxTitle.fillText(title, ctxTitle.xpos, ctxTitle.ypos);
}

If I left anything out, feel free to ask! 🙂

Answer 1

I noticed a few things:

1) You’re trying to tween the css of the context itself instead of the canvas element.

//BAD:
TweenLite.to(document.getElementById('canvas4').getContext('2d'), 0.5, {css:{alpha:0}});

//GOOD:
TweenLite.to(document.getElementById('canvas4'), 0.5, {css:{alpha:0}});

Of course you can create 1 tween for the context that handles the ypos and another tween for the canvas element that handles the opacity/alpha. They’ll run perfectly synchronized.

2) You’re using a very old version of the GSAP file(s). Snag the latest from http://www.greensock.com/v12/

If you need anything else at all, don’t hesitate to swing by the GreenSock forums at http://forums.greensock.com.