Animations

Add animations to elements to show them by scrolling. For further plugin documentation please visit scrollCue.js docs

Standard Example

Set the data-cue attribute in the target element and specify the animation type.

Parent Wrap

You can wrap it in a parent element by setting the data-cues attribute.

Group Wrap

You can group target elements by setting the data-group attribute. With grouping, when the first element is triggered, the remaining elements are also triggered sequentially, regardless of the scroll amount.

[data-duration]

You can set the showing time of the element. (ms)

[data-interval]

You can set the showing interval time of the element. (ms)

[data-delay]

You can set the showing delay time of the element. (ms)

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
let name = document.querySelectorAll('.anim .hljs-string'); let elm = document.querySelectorAll('[data-cue]:not(span)'); let select = document.querySelector('select'); let button = document.querySelector('input'); function ac(val) { for (let i = 0; i < name.length; i++) { name[i].innerHTML = val; } button.click(); } function reload() { for (let i = 0; i < elm.length; i++) { elm[i].style.animationName = null; elm[i].setAttribute('data-cue', select.value); elm[i].removeAttribute('data-show'); } scrollCue.update(); }