Hi all,
I am trying to get into Bannertime and its a bit of a learning curve but can see the benefits.
I am trying my current banner timeline setup to work with it.
In the Bannertime example this is how the animation is called and animated.
/**
* Animation timeline.
*/
Banner.prototype.animate = function () {
var _this = this;
function loop() {
_this.timeline.gotoAndPlay('start');
}
this.timeline = new TimelineLite({ onComplete: loop })
.addLabel('start', 0)
.add(TweenLite.to(this.logo, 2, { autoAlpha: 1, scale: 0.7, delay: 1, ease: Elastic.easeOut }))
.add(TweenLite.to(this.logo, 1, { autoAlpha: 0, scale: 0.4, delay: 1 }));
};
In my previous banners I have a start animation function which adds in each frames of the banners. I separate them into frames to match a storyboard. I have tried the below adding in how I animate with the current Bannertime setup but it does not seem to be calling my startAnimation. I have also attached the whole original Bannertime file. Any help is appreciated I would like to still have animation setup but within Bannertime.
/**
* Animation timeline.
*/
Banner.prototype.animate = function () {
var _this = this;
function startAnimation() {
timeline = new TimelineMax({
repeat: 1, repeatDelay: 3 }), timeline.set( banner, { autoAlpha: 1 })
.add(frame1(), "+=0.0"), timeline.timeScale(1), console.log(timeline.duration() + "timeline duration")
}
function frame1() {
var t = (new TimelineMax)
.fromTo(this.tablet, 2, { top: -64, autoAlpha: 0 }, { top: 0, autoAlpha: 1 })
.to(this.model, 2, {autoAlpha: 1}, "+=0.0")
return t;
}
};
Many thanks,
Chris
banner.animation.js
