The purpose of this test is to familiarise a candidate with a few concepts used in Bannertime, Greensock and general Animation for the Web.
The task below simulates a typical production brief.
Adapt a 160x600 (Width x Height) banner from the existing 300x250 Master banner.
Here is a storyboard of how the banner should look.
You should not overwrite the existing banner but create a copy that you can adapt to the correct size.
Do not worry if you are unable to complete the test, and there is no time limit. But keep a note of the issues you encounter and how much time you spend on it.
In order to use this repo please fork it by using the following instructions.
- Click the + icon on the side bar on the right
- Click on Fork this repository
Provided that your node environment has already been setup, you would need to install the dependencies and then run gulp.
$ npm install
This will install all the dependency modules needed to run the repo
$ gulp
This will start a local server for you to use to develop
Once you are ready to hand-in your work, you will need to create a commit and push the work back up to your own forked repo and then add users; dev-kp and joe_midi so that the test can be assessed.
Bannertime is tool built with Node.js. To install Node.js we don’t use the standard installer, instead we use nvm a Node Version Manager, which allows you to switch between Node versions depending on the project.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
On OS X, if you get nvm: command not found
after running the install script, one of the following might be the reason:-
- your system may not have a [
.bash_profile file
] where the command is set up. Simply create one withtouch ~/.bash_profile
and run the install script again - you might need to restart your terminal instance. Try opening a new tab/window in your terminal and retry.
Gulp Our prefered task runner is Gulp, we use this to automate processes such as compiling SASS into CSS, checking our Javascript files for syntax errors and minifying our image files.
npm install --global gulp
Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive, at the moment we only really use Yeoman for Bannertime.
npm install --global yo
Bannertime is a yeoman generator we built in-house to help with the creation of banners. It provides you with some of the best practises for creating HTML5 banners, and we currently use it on all our campaign projects.
npm install --global generator-bannertime
These three commands can be combined into:
npm i gulp yo generator-bannertime
$ git clone git@bitbucket.org:username/bannertime-developer-test-2019.git
$ cd bannertime-developer-test-2019/
$ npm i
$ gulp
$ yo bannertime:copy
It is important to check out www.greensock.com/gsap to get an understanding of how the GSAP animation library works.
scale
: - Allows you to change the size of object.x
: Horizontal planey
: Vertical plane
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