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.jpg

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

Featured
Squarespace Summary Blocks Meta Fix
Squarespace Summary Blocks Meta Fix

Soo... seems someone already experiencing disappeared meta (categories/tags/date/author)  in your Summaries Blocks? Not sure Squarespace gonna fix this and how long it will take, but we may fix it now

Mobile images zipper
Mobile images zipper

Often we use alternate text/image and image/text layouts and it looks cool on desktops. But when you''ll go to mobile, you probably want to see image and its description under, not on the top. We'll try fix this.

Parallaxing Map in Brine-family templates
Parallaxing Map in Brine-family templates

Often you need to build impressive homepage with map location section. If you are using Brine-based template and want to make full-width parallaxing Map section on Index page - there is an easy way to do this.

Go To Next Slide When Vimeo Finished
Go To Next Slide When Vimeo Finished

If you are using Squarespace Gallery block to host Vimeo videos, it makes sense go to next slide when video stops playing. And this actually can be easily done.

Squarespace Websites Uploader
Squarespace Websites Uploader

Squarespace has good forms builder, but unfortunately there is no upload field to store user files or docs. It may be useful for user images, screenshots, pdf-forms or so. Sure you may use some side services to organize file uploading: Wufoo, JotForm and many others. And while they have great builders and file uploads, sometimes you need more than 3-5 forms or 1000 form views per month with free account.  So we decided to make a small javascript plugin, which adds file upload fields to Squarespace forms and small service to handle these uploads.

How to add custom fonts to Squarespace site
How to add custom fonts to Squarespace site

Squarespace has a variety of fonts available out-of-box. There are many Google and Typekit fonts to choose from. You can even add your own Webfonts fromTypekit or other 3rd part font providers but more often than not, you will need to add custom fonts to make them available for choosing in Style Editor, which is actually an important consideration.

Squarespace Websites Importer advanced using
Squarespace Websites Importer advanced using

We added  sqsToolsDataHook into SquarespaceWebsites Importer extension for advanced users. It fires after you get collection data and allows you to make different stuff.

Using JSON-T (JSON Templates) with AJAX on Squarespace
Using JSON-T (JSON Templates) with AJAX on Squarespace

Often developers  need to make custom widgets for Squarespace using AJAX. But what if you want to use comfort templating (with all Squarespace predicates and formatters) which you already have built-in - JSON-T? Squarespace use it on backend and on front too.

Fast & Performance Sites on Squarespace platform? Sure!
Fast & Performance Sites on Squarespace platform? Sure!

We are grateful Squarespace for all great stuff they give to comfort building site. But all that functionality need more styles and scripts to load - and this is bad at least on first page view on mobile connections. Is there any way to improve page load time? Let's see!

Inserting Squarespace Search Block
Inserting Squarespace Search Block

Sometimes you just need to add search to your site. It is simple to do with usual Squarespace Search Block. This way works for pages, collection items and editable blocks in template.

Prevent Squarespace Audio blocks open in player on IOS devices
Prevent Squarespace Audio blocks open in player on IOS devices

If you try to open page with Audio Block mobile Safari - you'll be redirected to source url and track will be play in player. But we may prevent this if needed.

Playing background sound on Squarespace
Playing background sound on Squarespace

Popular question on Squarespace Answers  is about adding some background music to page. This is not the best UX to autoplay something on pageload, but we may give a try.