Jump to content

How to implement design interactions on Squarespace?

Recommended Posts

Does anyone have any tips on how to use design interactions with Squarespace?

Design interactions are subtle animations that take place on the page triggered by scrolling to a certain point on the page. See here.

Squarespace has some sort of design interactions on almost all their new pages...and the Jeff Bridges website does too. How are they doing this? Can't figure it out...can anyone point me in the right direction?

I run the Squarespace Guru blog (www.sqsp.guru) and host the Squarespace Guru podcast.

Link to comment
  • Replies 5
  • Views 15.9k
  • Created
  • Last Reply

I'm sure it's not exactly the answer you want to hear but this stuff is very easy to do with Javascript, once you learn it. Javascript libraries like jQuery, and even various scrolling plugins (which are just a collection of pre-packaged custom javascript), allow you to do all sorts of interactions based on what's called the "viewport" position. The plain-english translation of the effects are essentially something like this: when THIS element appears between these two locations of the browser viewport, apply this CSS.

For example, this illustration from the Skrollr.js library lays out the position attributes you can use to control when an interaction takes place.

alt text

Skrollr is used on http://squarespace.com/seven. The start attribute has one CSS setting. The end attribute has another CSS setting. Skrollr animates the CSS from start to end. These animation don't need to be so complex though. They can be done with Javascript alone.

Link to comment
  • 1 year later...
  • 4 weeks later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.