How to implement design interactions on Squarespace?

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.

I think interaction is a big trend in web design that's here to stay. Hover effects are one form of interaction.

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.