Jump to content
Search Community

Bannertime and GSAP question

choward test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I really don't have any experience with Bannertime, so I'm not really sure what you are asking.

The file you attached is just a javascript file and I'm not really sure what it is supposed to do.

 

Have you tried asking the Bannertime people for help with this?

 

There might be someone in this forum that will be able to help, but we really have to keep our official support focused on the GSAP API.

 

 

If you have a question about GSAP, it would be great if you could create a simple demo using CodePen, jsFiddle, jsBin or another online editor

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi @Carl,

 

Thanks for your reply.

 

I will check and see if I can find some more documentation on Bannertime.

 

In regards to GSAP I do have a question. I can see there are a few ways of implementing timelines. 

 

Is there a best practice approach to timelines? I learnt from Ihatetomatoes and using the cheatsheet.

 

It creates a master timeline then using functions creates nested timelines and then calls those functions into the master timeline.

 

Does this have any impact or benefit?

 

Apologies I am new to using the GSAP library and would like to adhere to best practice.

 

Thanks,

Chris

Link to comment
Share on other sites

It depends on what you're creating. If it's just a few tweens on a timeline, then returning the timeline from a function may be a bit of overkill. The biggest advantage to creating timelines in functions is that it's modular. It's quick and easy to make changes and you aren't buried in a wall of code.

 

Check out this article by @Carl for more in-depth information. 

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Hi @PointC,

 

Thanks for the link to the article I now have a much better understanding of the benefits and reasons to use functions.

 

I know this question is more off topic but would you happen to know in regards to licensing what level is needed to create display banner for advertising in an agency and who needs to hold the license? I would be producing the banners as part of ad agency solely as the only digital designer and then they would be packaged to client to server through ad platforms such as Sizmek and DoubleClick.

 

I have read the licensing pages but I still am not clear on its use for regular display banners.

 

Thanks,

Chris

Link to comment
Share on other sites

8 minutes ago, choward said:

would you happen to know in regards to licensing what level is needed to create display banner for advertising in an agency and who needs to hold the license? I would be producing the banners as part of ad agency solely as the only digital designer and then they would be packaged to client to server through ad platforms such as Sizmek and DoubleClick.

 

In terms of the license, it sounds like you'd probably need a "Business Green" one. If it's only you who ever touches GSAP-related code, then you're fine with a 1-developer license. Or if you've got others who will use GSAP, snag the appropriate multi-developer one (up to 5 developers, or up to 20 developers). If you never resell stuff to multiple clients, you don't technically need any special commercial license. 

 

Thanks for caring enough to ask. Let us know if you need anything else. Happy tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...