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

How to implement design interactions on Squarespace?

Question

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.

Share this post


Link to post

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.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...