Hi,
I'm building some HTML5 banners, and i normal use TweenMax and TimelineMax and that works fine, now i have a banner and i need to make it a little smaller to fit in the 150K Google size, so i thought i use Tweenlite, TimelineLite and easingpack as the annimation is very easy but i cant get it to work.
this is the JS script
window.onload = function() {
var tl = new TimelineLite();
tl.timeScale(.8)
// Slide in Quote 1
tl.from("#quote1", .6, {x:300, ease: Power2.easeOut});
// Quote 1 to quote2
tl.to("#quote1", .8, {scaleY:4,scaleX:4, y:-500, opacity:0}, "+=2");
tl.from("#quote2", .8, {scaleY:0,scaleX:0}, "-=.8");
tl.to("#bg-blue", .8, {opacity:0}, "-=.8");
//slide in the background
tl.from("#bg-left", .8, {x:-150}, "+=2");
tl.from("#bg-right", .8, {x:150}, "-=.8");
//zoom in logo
tl.from("#logo", .8, {scaleY:0,scaleX:0});
// fade idina in
tl.from("#idina", 1.5, {opacity:0, ease: Power2.easeOut});
// Add overlay
tl.from("#overlay", 2, {opacity:0, ease: Power2.easeOut}, "-=.5");
// slide in date, theatre and get
tl.from("#date", .8, {y:50, opacity:0, ease: Power2.easeIn}, "-=2");
tl.from("#theatre", .8, {y:-50,opacity:0, ease: Power2.easeIn}, "-=2");
tl.from("#buttonbg", .8, {opacity:0, ease: Power2.easeIn}, "-=1" );
// Fadein quote3
tl.from("#quote3", .8, {opacity:0, ease: Power2.easeIn} );
TweenLite.set("#stage", {visibility:"visible"});
}
and i include the following js scripts
TweenLite.min.js TimelineLite.min.js EasePack.min.js
the animation is not running and it is not giving me any errors so i have no clue what is wrong.
any idea's
Thanks,
Rob