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) ->
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()
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.
L or F like
Z toggle zoom
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2016 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.