Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to implement design interactions on Squarespace?

Go to solution Solved by jasonbarone,


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?

Edited by SquarespaceGuru

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

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 2

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.

Edited by jasonbarone

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
This topic is now closed to further replies.

  • Create New...