Animate On Scroll Plugin

$10.00

Easy configurable Squarespace animation on scroll plugin to add some on-scroll animations to your Squarespace.com site.

Just add script and style to Injection Tabs and easy init with (example for this page):

Scroll Effects:

Fadein, Rotate, Move up, Scroll, Fadeout, Flip & more effects.

Add To Cart

Easy configurable Squarespace animation on scroll plugin to add some on-scroll animations to your Squarespace.com site.

Just add script and style to Injection Tabs and easy init with (example for this page):

Scroll Effects:

Fadein, Rotate, Move up, Scroll, Fadeout, Flip & more effects.

Easy configurable Squarespace animation on scroll plugin to add some on-scroll animations to your Squarespace.com site.

Just add script and style to Injection Tabs and easy init with (example for this page):

Scroll Effects:

Fadein, Rotate, Move up, Scroll, Fadeout, Flip & more effects.

Just add script and style to Injection Tabs and easy init with (example for this page):

<script>
window.animOnScrollConfig = {
    '#item-594129576a49639dc352bdb3 .summary-item-list': {//css selector for main scroll container
        items: '.summary-item',//css selector for inside items 
        itemsOverlayColor: '#f2f2f2',//background color for somme effects using overlay: 'besLeft', 'besRight' etc
        easing: 'cubic-bezier(1, 0.2, 0.32, 1)',//css easing function for animations (ease, ease-in, linear etc)
        effect: 'moveUp',//effect name: fadeIn, scaleUp, moveUp, flip, besUp, besRight, besOpen, besLeft, besDown, rotate, rotateUpLeft, rotateDownLeft, rotateUpRight, rotateDownRight
        minDuration: 0.5,//min animation duration in seconds
        maxDuration: 1.2,//max animation duration in seconds, if minDuration and maxDuration set, randomized value in these limits will be used
        viewportFactor: 0.2,//1 mean start animating when the whole element is in viewport.If 0 - animation starts as soon as element appear in viewport
        reverse: !0//reanimate scrolled items
     },
    '#item-594129576a49639dc352bdb3 .sqs-block-gallery': {
        items: '.slide', 
        itemsOverlayColor: '#f2f2f2',
        easing: 'cubic-bezier(1, 0.2, 0.32, 1)',
        minDuration: 0.5,
        maxDuration: 1.2,
        effect:'besRight',
        viewportFactor: 0.2,
        reverse: !0
     }
    };
</script>

Play with effects here

Scroll Effects