Untitled

Got animation queueing working on my little boxes!

They're triggered by scrolling, using the waypoints plugin, and each increment of the $$$ reads its base value from the DOM. When the page reloads and the browser jumps you to wherever you left off, all the waypoints triggers were firing simultaneously, and all reading the same base value, instead of waiting for other animations to finish and firing sequentially. Enter, jQuery queueing!

Now my "add money" function looks like this:

add_to_cost = (amount) ->
$(document).queue ->
increment_money_display('.cost h1', amount)
animate_money_container('.cost h1', 'add')

And my "increment_money_display" has a window.setTimeout callback that calls $(document).dequeue()

https://github.com/ehmorris/student-loan-aftermath/blob/494c57ca0651c6dcfd7ef15a1490106e44ace1a1/source/javascripts/_increment.coffee

It ends up being fun to watch on reload since all the animations play in a row.

This little project is full of fun problems — animation queueing, viewport relative sizing, scroll triggering, utilizing "animationend" events, etc.

More from Edwin Morris

  1. Two years ago today I interviewed at Genius
  2. Place listing
  3. Calendar
  4. On load

Tags

keyboard shortcuts: L or F like Z toggle zoom post comment