[Share your Greensock JS creations!]

Some of you may already have seen this one but our site is using the TweenMax API to do some CSS tweens.

 

http://www.creative9.com

 

Thanks

Zee

[Safari Problems + Performance]

Thanks for the info Carl.

 

Yup I had the same problem with finding a direct download link for the safari for windows which was extremely strange.

 

If I don't find anything I guess I'll just have to go with it and hope the few people that use it will simply try it in another browser...

 

Thanks

Zee

[Safari Problems + Performance]

Thanks Carl, glad to hear it's running fine on the MAC, that's certainly a relief.

 

I will certainly keep you guys updated if I find the problem.

 

Appreciate you taking the time to try the site out.

 

Zee

[Safari Problems + Performance]

Hi guys,

 

We're using TweenMax for our site (still in development) and it all works splendidly on most browsers however on Safari (Windows 7, haven't tested on Mac), there seems to be some major delays and sluggishness with even basic things like link hovers, rollovers and the browser scrollbar which seems unselectable.

 

http://www.creative9.com/wordpress/

 

I must stress however that the animations are rolling out surprisingly smooth. At this point in time, I can't for the life of me figure out why. I disabled the Greensock libs and the said issues disappeard. The site is making extensive use of z-indexes so I'm not sure if I'm sufferring from the same issue you guys outlined below.

 

http://forums.greensock.com/topic/6398-page-not-updating-correctly-in-safari-and-ios/

 

Either way if it's a fault with my own code or with something else I'm foolishly omitting I'd appreciate it if someone could give it a look over.

 

I can zip up and send over the site files if anyone needs them.

 

Thanks

Zee

[Image Blurs On Canvas]

Hi all,

 

Firslty a big thank you to GreenSock for this wonderful API. I'm not from a flash background and this framework has really made animation a whole lot easier for me, so a big thank you.

 

Secondly, I followed the Lee Brimelow tutorial that's linked off this site and decided to put together a little animation using the HTML5 Canvas. Everything is really smooth and it works perfectly, however the image seems to blur and sharpen, almost as if on each re-draw it's taking to long to render hence the blur.

 

It actually gives a nice motion blur effect and adds some extra realism to the moving space ships. However it's not what I need right now.

 

Since I'm new to animation is it possible that my canvas is just too big or maybe the png files I'm using are too big ?

 

Canvas Size (1000x700)

3 Image Files (421KB, 111KB, 84KB)

 

Here's my code if anyone wants to take a look.

 

Thanks in advance for any help.

 

var canvas = document.getElementById('red-ships');
var context = canvas.getContext('2d');

shipLarge = new Image();
shipLarge.src= "images/ship-pink-large.png";
shipLarge.xpos = 10;
shipLarge.ypos = 350;

shipMedium = new Image();
shipMedium.src= "images/ship-pink-medium.png";
shipMedium.xpos = 20;
shipMedium.ypos = 60;

shipSmall = new Image();
shipSmall.src= "images/ship-pink-small.png";
shipSmall.xpos = 550;
shipSmall.ypos = 170;


TweenMax.killDelayedCallsTo("loop");


// calculate where you want to motion tween each ship to
largeToXpos = shipLarge.xpos -10;
largeToYpos = shipLarge.ypos +15;
mediumToXpos = shipMedium.xpos +5;
mediumToYpos = shipMedium.ypos +5;
smallToXpos = shipSmall.xpos -10;
smallToYpos = shipSmall.ypos +10;

TweenMax.to(shipLarge, 5, { xpos:largeToXpos, ypos:largeToYpos, repeat: -1, yoyo: true });
TweenMax.to(shipMedium, 4, { xpos:mediumToXpos, ypos:mediumToYpos, repeat: -1, yoyo: true});
TweenMax.to(shipSmall, 4, { xpos:smallToXpos, ypos:smallToYpos, repeat: -1, yoyo: true });

// binds the loop function to the tick event
shipLarge.onload = function () {
		   TweenLite.ticker.addEventListener("tick", loop);  
}

// redraw the elements
function loop() {
// clears the canvas before every re-draw

context.clearRect(0, 50, 1000, 750);
context.drawImage(shipLarge, shipLarge.xpos, shipLarge.ypos);
context.drawImage(shipMedium, shipMedium.xpos, shipMedium.ypos);
context.drawImage(shipSmall, shipSmall.xpos, shipSmall.ypos);
}

 

Zee