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.
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
Featured
In this year-end feature, we shine a spotlight on 15 trailblazing brands that have embraced Squarespace plugins to elevate their online presence, providing users with a seamless and visually stunning website experience.