Main image for Integrating Bounce.js with Angular.js Time to Read: ~1 min

I have been posting links to things I find useful on Twitter, and one lately was bounce.js. A follower challenged me to think about whether it could be integrated with angular.js. I use Angular at my day job, but had not integrated an animation library with it. Of course, "integration" is a term open to interpretation.

@scottpdawson @JoelBesada Yes but can you integrate it with angular.js

So, my goal was to integrate bounce.js with Angular.js, in particular, with ng-show directives. When I want to show or hide an element in Angular, I use a Boolean scope variable or an expression in conjunction with ng-show or ng-hide. Rather than set this scope variable directly with ng-click (for instance, on the buttons in my example), I can instead call a function that applies the animation in conjunction with this scope parameter change.

Showing is easy: set the scope variable to true, ensuring the element appears, and apply the bounce animation to the element. Hiding is more complex, and involves a jQuery promise (then) to get the scope and set the scope variable to false, just after the animation is completed.

Buy me a Coffee

Did you enjoy this? Did it help you? Make you laugh? Dare I say, all of the above? If you like my work — my writing, distributed work tips, #RemoteChat, or my other open source projects — you can buy me a ☕ and let me know what you think.