How to implement design interactions on Squarespace?

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 think interaction is a big trend in web design that's here to stay. Hover effects are one form of interaction.

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.

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.

Perfect, thanks so much Jason! You rock!

@SquarespaceGuru, check out this tutorial i developed to solve this problem: http://www.droverrideshare.com/blog/2016/7/25/css-animations-and-squarespace

venetiandesign's tutorial didn't fix it. Tried it three times. No luck.