In addition to animation inside your ad, the panels of an Expandable ad can be moved around the page using animation. Sizmek has an Animator class that can be accessed from inside or outside the creative.

The API for the Animator is the same in each case.

Configuring Your Animate Elements on the Page

The Animator supports animating any element on ad page. The Animator is stored under EBG.animator during instantiation. 

You can track the animator by subscribing to this event - EBG.Events.EventNames.ANIMATION. The behavior is different depending on the event timing property. 

Event  Description
 EBG.API.EventManager.subscribeToEvent(EBG.Events.EventNames.ANIMATION, _self.handlers.handleBeforeAnimation, EBG.Events.EventTiming.BEFORE Subscribe to know when the animation starts with the event of timing BEFORE. There is only one callback; the animation can be aborted.
  EBG.API.EventManager.subscribeToEvent(EBG.Events.EventNames.ANIMATION, _self.handlers.handleOntimeAnimation, EBG.Events.EventTiming.ONTIME Subscribe to know when the animation starts with the event of timing ONTIME. There is only one callback; the animation can be aborted. 
  EBG.API.EventManager.subscribeToEvent(EBG.Events.EventNames.ANIMATION, _self.handlers.handleAfterAnimation, EBG.Events.EventTiming.AFTER Subscribe to know when the animation starts with the event of timing AFTER. There is only one callback; the animation cannot be aborted.

EBG.animator.animate (element, props, callback, binding)


The Animate function supports animating any element on the ad page and is stored under EBG.animator during instantiation. 

Modifies any DOM element style over a period of time. Function returns an animation id, which can be used to identify the specific animation. 

element HTMLElement Declares the element you wish to animate. If undefined, no exception is fired though callback function will not be triggered. The function can accept an array of elements for triggering the same animation of multiple elements at the same time. If done this way, the function return value will be an array of animation IDs.
props Object

A key value object of the properties to be animated. The supported properties include init, reverse, top, left, bottom, right, width, height, clip, and opacity. posTypeX, posTypeY, duration and easing are also passed as well. A customData property, which is an object with any data that needs to be passed to the callback function, can also be set.

Top, left, bottom, right, width, and height can have their values set by each of the following ways:

  • Set the end value of a style property : { height: "100px" } or { height: 100 }  (set 100px of the element height).
  • Add/subtract of the current element style property value as the final value : { height: "+=100px" } or { height: "-=100px" } (subtract 100px of the current element height).

opacity: Range: 0.0 - 1.0 (fading in, out, or in between). If option is set with "auto", the animation will restore the element to its full size.

clip: The clip rect CSS property uses this format: rect (top, right, bottom, left). Animator detects if the element already has a rect clip value and animates accordingly. For example:"rect(0px, 100px, 100px, 0px)" as the end value of the clip property. 

duration: Sets the amount of time the animation will take. The assigned value is in milliseconds. The default is 1000 ms.

easing: Specifies the rate of change of a parameter over time. You can assign an easing function name based on EBG.Animation.Easing enum. The default is EBG.Animation.Easing.linear.

Animation can be done using JavaScript code or CSS3 transition (more efficient and looks better). By choosing the animation easing function, you determine which mechanism to use.

It is recommended to use TransitionEasing to set the engine with CSS3 Transition.

init: The init object overrides the element's initial style properties from which the animation starts. It is an easy way to specify the initial position and scale of an element. The Init option values are relative to the page in pixels. 

You can pass values with operand ( top: +=100”) which will add/subtract current element style value, or pass end values by passing a number ( top: “100px” or top:100 ).

reverse: Sets the element initial style as the end properties of the animation, and vice versa.  The end style for the animation is set if the init option is specified.

Another option is to assign a custom easing function causing the the animation to accelerate from zero velocity by assigning a function with the following signature: function (t) { return t * t; }

t represents the ((animation start time) - (current time)) / (animation duration). If unspecified, the default easing is set to Animation.TransitionEasing.ease. This specifies a transition effect with a slow start, then fast, then end slowly.

callback  Function Triggers any callback function when that animation is done causing the animated element to be passed as the first argument.
binding  Object The context of the callback function triggered. If unspecified, the callback function context will be a window. 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request