Different ad formats like banners animated with GSAP using the inbuilt timeline functionality.

The idea

Although the experiments in this series focus on working with GSAP I'd like to add some background story.

For this example I imagined an ad delivery system that serves HTML5-based ads. (I'll probably expand on that later).

Configuration and other specifications would be stored in a database.

On the site the administrator could place the ads as simple HTML and would have to integrate one script.

In a real world scenario the ads would probably be delivered in the form of an iFrame.

Technically they would also contain all the code necessary, probably compiled into one script only.

The implementation

In the first iteration I stored configurations in an array and had separated the actual animation methods.

I also specified the type of the animation, e.g. "roll" or "fade".

Lateron I moved more or less all code into the config itself.

The code for the timeline looks like this:

                        
    tl
        .to(globalBackground, { y: (-2 * adHeight), opacity: 0.75, duration: (adDuration - pause), ease: 'none' }, 0)
        .to('.eec-ship--1', { opacity: 1, y: adHeight, duration: 0, ease: 'none' }, 0)
        .to('.eec-ship--2', { opacity: 1, y: adHeight, duration: 0, ease: 'none' }, 0)
        .to('.eec-ship--3', { opacity: 1, scale: 3, x: 0, y: adHeight + 1, duration: 0, ease: 'none' }, 0)
        .to(container, { y: (-1 * adHeight), duration, ease }, `<+=${pause}`)
        .to('.eec-ship--1', { y: (-1.5 * adHeight), duration, ease }, `<`)
        .to('.eec-ship--2', { y: (-1 * adHeight), duration, ease }, `<-=0.75`)
        .to('.eec-ship--3', {y: (-1.5 * adHeight), duration, ease }, `>=0.25`)
        .to('.eec-ship--1', { opacity: 0, duration: 0, ease: 'none' }, `>`)
        .to('.eec-ship--2', { opacity: 0, duration: 0, ease: 'none' }, `<`)
        .to('.eec-ship--3', { opacity: 0, duration: 0, ease: 'none' }, `<`)
        .fromTo('.ad__bullets li', { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, duration: duration / 3, stagger: 0.25 }, `>-=${pause / 2}`)
        .to(container, { y: (-2 * adHeight), duration, ease }, `>+=${pause}`)
        .to(container, { y: (-3 * adHeight), duration, ease }, `>+=${pause}`)
        .to(globalBackground, { y: 0, duration: 0, ease: 'none' }, '<')
        .to(globalBackground, { opacity: 1, duration: pause, ease }, `>-=${pause}`);
                        
                    

The ads are formatted as articles and show some data-attributes that store their dimensions, the id of the configuration to use and a campaign.

The code for an ad looks like sth. this:

                        
        <article class="ad ad--square250x250" data-config="x132" data-dimensions="250" data-campaign="eec-2022-enroll">
        ...
        </article>
                        
                    

This is just one way to use the same configuration with different sizes of ads.

To still be able to deliver value even with javascript turned of (if that's still a thing) I formatted the ads to show a fallback.

The result