Search the Community
Showing results for tags 'bannertime'.
Found 3 results
-
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
-
I've read through all the documentation about Bannertime at https://bannertime.github.io/ It looks like a wonderful resource. However is there anywhere where I can learn more about the actual development process of the banners? How do I use an smart object? Where do I input the configuration object? How do I use the preload code? Any reference banner will be great!
-
Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either). I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox. The structure of the object is as follows: <div class="banner"> <div class="border"></div> </div> The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized. I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!
