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.
-
Inside the creative:
-
Outside the creative (Custom script):
The API for the Animator is the same in each case.
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 |
|
Subscribe to know when the animation starts with the event of timing BEFORE. There is only one callback; the animation can be aborted. |
|
Subscribe to know when the animation starts with the event of timing ONTIME. There is only one callback; the animation can be aborted. |
|
Subscribe to know when the animation starts with the event of timing AFTER. There is only one callback; the animation cannot be aborted. |
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.
NAME |
TYPE |
DESCRIPTION |
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:
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: 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 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 init: The 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; }
|
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. |
You can use these methods on panels.
The expand API function allows you to expand the panel, including all of the expand data you need to ensure the expansion occurs as expected, including animation options and auto collapse timer. The panel name is part of the second parameter.
The collapse API function allows you to collapse the panel, including all of the collapse data you need to ensure the collapsing occurs as expected, including animation options. The panel name is part of the second parameter.
Comments