Toggler

The Toggler swatch will allow you to add custom interactions onto your site that you could never do before. Toggler allows you to toggle a class on or off of one element by hovering or clikcing on another element on the page. In the demo below, you can click of hover on the buttons in order to affect the style of the box on the right. Do not let the simplicity of this fool you. You can do some really spectacular things with the Toggler swatch.

Toggler Demo

Use the buttons to animate
this demo.

WeaversSpace Created with Sketch.

Toggler Scroll

Toggler scroll gives you the same power as the Toggler stack. However, you can easily add and remove classes when an element scrolls into view. You can even toggle a class on a fixed position element as a different element scrolls into view. This can be a very powerful tool.

As you scroll the page up and down watch as the elements below animate when they scroll into and out of the viewport.

Toggler Demo

Use the buttons to animate
this demo.

WeaversSpace Created with Sketch.

Toggler Demo

Use the buttons to animate
this demo.

WeaversSpace Created with Sketch.