Responsive design

This example illustrates some of the responsive design features built into pushIn.js. These features can help you control the layout and behavior of the effect for each of your breakpoints, giving you a great amount of flexibility.

Why is this necessary?

When there is a lot of wrapping content like paragraphs of text, the page content could become longer on smaller screens like phones or tablets. This could interfere with the timing of pushIn.js animations, since it relies directly on the window scroll position. This is where specifying different settings per breakpoint can come in handy.

Watch the debugger floating near the top of your browser.

This should begin animating at:

  • Mobile: 580px
  • Tablet: 280px
  • Desktop: 200px