Premium.animation
Premium.animation is only available in version >=2.4.7.
This component enables preset animations to be easily applied in a creative.
[jp-entrance-anim]
Add this attribute to the elements required to be part of the entrance animation sequence. By default all elements will start with opacity:0 and fade in while moving a little from the left, right or top (using CSS transform:translate), depending on the format and panel.
In PremiumJS v2.4.7 this was acheived by adding class jpt-entrance-anim, as opposed to an attribute.
<button jp-entrance-anim class="cta">Buy Now</button>
Setting the jp-entrance-anim attribute to a value can change the animation type. Here are all the values the library accepts:
| value | effect |
|---|---|
| classic | default classic behaviour (described above) |
| fade | simple fade in |
| pop | pops up into view |
| drop | drops down |
| slide | slides in from the right |
| rise | rises up from the bottom |
| maskx | reveals from the centre along x-axis |
| masky | reveals from the centre along y-axis |
Here, the element is set to use the rise animation:
<img jp-entrance-anim="rise" id="Logo" src="assets/Logo.png" alt="">
slide and rise types can be modified to move in reverse, by adding rev to the value. Here, the element will slide from the top, down into view:
<img jp-entrance-anim="rise rev" id="Logo" src="assets/Logo.png" alt="">
The value set in one element will persist to all following elements with the jp-entrance-anim attribute.
[jp-anim-config]
You can optionally also set attribute jp-anim-config to override 3 defaults:
- duration
- interval (the time between the end of the previous element’s animation and the start of this one)
- ease
It takes a space-delimited list of property:value pairs. Here the animation defaults will be overridden as shown:
<button jp-entrance-anim="pop" jp-anim-config="duration:1 interval:2 ease:none" class="cta">Buy Now</button>
The value of jp-anim-config will persist to all following elements with the jp-entrance-anim attribute.
To set back to the default, you can set jp-anim-config to default
[jp-anim-start]
If desired, the starting CSS of the animation can be customized per element, by adding attribute jp-anim-start. Note, only properties already part of the preset will be affected. It takes a space-delimited list of property:value pairs. Here the element will animate from scale:0. The default for pop is scale:.8.
<p class="main-copy" jp-entrance-anim="pop" jp-anim-start="scale:0">Some copy here.<p>
To use avoid conflict with any other animation on the same element, another inner element may need to be used.
Premium.animation.getEntranceAnimation()
This function returns a reference to the gsap timeline and stops it from autoplaying. This is useful for syncing animations between panels and for controlling the start of the animation. The example below will play the entrance animation only when the creative is more than 50 percent visible (in scrolling formats).
var entranceAmin = Premium.animation.getEntranceAnimation();
var hasPlayed = false;
Premium.product.scopeWindow.addEventListener("scroll", function(){
if (!hasPlayed && Premium.jpxApi.getPercVis() > 50){
hasPlayed = true;
entranceAmin.play();
}
})
The entrance animation will work without calling Premium.animation.getEntranceAnimation(). Only use this if more control is needed over when it starts.
Premium.animation.delay
Overrides the delay, in seconds, before the animation starts. default: 0.25.
Premium.animation.delay = 1;