Animate On Scroll Plugin

Plugins Store

Squarespace plugins that are powerful, beautiful and easy to install. We offer quick users help and support. Create amazing websites simply.

Animate On Scroll Plugin

Animate On Scroll Plugin

10.00

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

Add To Cart

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