Premium.cta

Premium.cta is only available in version >=2.4.7

This component enables easily adding hover effects and looping animations to CTA buttons.

[jp-cta-hover]

HTML attribute to set the CTA hover effect. It takes one of the following values:

scale	to set increasing scale as the hover effect
bg	to set image changing (if there is a 2nd <img> tag) or adding class hover as the hover effect
arrow	to add an arrow and set this moving as the hover effect
sheen	to add a sheen and set this as the hover effect

This CTA will increase its scale on hover:

<button class="cta" jp-cta-hover="scale">See More</button>

This CTA will have class hover added on hover:

<button class="cta" jp-cta-hover="bg">Shop Now</button>

This CTA will hide the 2nd image by default and show it on hover:

<button class="cta" jp-cta-hover="bg">
    <img src="assets/cta-default.png"/>
    <img src="assets/cta-hover.png"/>
</button>

[jp-cta-animate]

HTML attribute to set the CTA looping animation. It takes one of the following values:

scale	to set pulsating as the looping animation effect
bg	to set image changing (if there is a 2nd <img> tag) as the looping animation effect
arrow	to add an arrow and set this moving as the looping animation effect
sheen	to add a sheen and set this as the looping animation effect

This CTA will pulsate:

<button class="cta" jp-cta-animate="scale">See More</button>

This CTA will have an animating arrow added:

<button class="cta" jp-cta-animate="arrow">
    <img src="assets/cta-default.png"/>
</button>

note

jp-cta-animate="bg" only works for images, not CSS background

Elements can have any combination of hover and animate effects. In this example, the CTA will scale on hover and have a looping sheen animation:

<button class="cta" jp-cta-hover="scale" jp-cta-animate="sheen">See More</button>

Premium.cta.getEffects()

This function returns an object with function play(), which starts the effects animations. It also stops them from autoplaying. This is useful for syncing the animations between panels and for controlling their start. The example below will start the CTA effects only when the creative is more than 50 percent visible (in scrolling formats).

var ctaEffects = Premium.cta.getEffects();
var hasPlayed = false;
Premium.product.scopeWindow.addEventListener("scroll", function(){
    if (!hasPlayed && Premium.jpxApi.getPercVis() > 50){
        hasPlayed = true;
        ctaEffects.play();
    }
})

note

The CTA effects will work without calling Premium.cta.getEffects(). Only use this if more control is needed over when they start.

Premium.cta.delay

Overrides the delay, in seconds, before the CTA effects start. default:2

Premium.cta.delay = 1;

Premium.cta.pauseThresh

Overrides the time, in seconds, before the looping animations stop. default:6

Premium.cta.pauseThresh = 10;

Premium.cta.speedFactor

Adjusts the speed, as a multiplication factor, of the CTA animations. default:1

Premium.cta.speedFactor = 2;

Premium.cta.freqFactor

Adjusts the frequency, as a multiplication factor, of the CTA looping animations. default:1

note

freqFactor only applies to sheen effect

Premium.cta.freqFactor = .5;

Premium.cta.moveFactor

Adjusts the amount the animations move or scale, as a multiplication factor. default:1

Premium.cta.moveFactor = 5;

Premium.cta.arrowRotation

Overrides the rotation, in degrees, of the arrow. default: 45 (for the default CSS arrow)

Premium.cta.arrowRotation = 0;

note

For the arrow effect, some adjustments to the CSS may be necessary, depending on how the CTA button was created. For best results, avoid using display:flex on the CTA and do not set its height (use padding only). Use class jp-cta-arrow to target the cta arrow.