Its Duncan Bannertime!
Use gulp
to automatically launch the banner into the browser with browsersync all your changes will be reflected in the browser with each file save.
Use gulp prod
to generate a ZIP file of all the assets of the banner, these will all have been minified as well.
Use gulp backup-gen
to automatically generate backup images for each banner.
You can create DOM elements using the the smartObject
function, this will initialise a <div>
with the default style of: position: absolute; top: 0; left: 0;
.
You are able to set a background image, or set a nested image as a <img>
element.
There are helper functions such as center
, centerHorizontal
and centerVertical
to help you position the element.
Other settings are set using a helper function on the element which uses GSAP to process. So this.logo.set({autoAlpha: 0, scale: 0.4});
is the same as TweenLite.set(this.logo, {autoAlpha: 0, scale: 0.4});
The banner animation is run by the animate
function.
By default we are using TweenLite with TimelineLite, but you can change which flavour of GSAP as you require.
For more information about animating using GSAP head to www.greensock.com