Note: This block is designed to be used within content when you want to bring attention to something, such as an optin form inside blog posts.

To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature).

IMPORTANT – Copy the code from the Custom HTML block below into Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer on this page, then delete the Custom HTML block. This code monitors the scroll position and allows the animation to function.

The cta-wrapper row and the cta section are the containers that make this effect work. The row inside the cta section can contain any content you wish, it doesn’t have to be this optin form.

You may want to change the points at which the animation starts and stops. This is controlled by the JavaScript you add to the header and footer scripts within the page. This is the only part you need to edit:

rootMargin: „-30% 0px -30% 0px”,

The root margin values move clockwise: top, right, bottom, left. You can use % or px values, but I suggest you leave at % so it adapts well on mobile. Decrease the values to have the animation on screen for longer, and increase for shorter. The top and bottom values do not need to be the same.

Sign up to the newsletter

Unicorn air plant kogi food truck

Banh mi vegan pinterest franzen hell of, narwhal keytar intelligentsia chartreuse kickstarter prism master cleanse cred. Scenester wolf slow-carb, man braid woke paleo normcore.