.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
How to toggle tweens in a DRY fashion
Hi there,
I'm trying to build a UI with different components using tweenlite to add/remove items from the viewport.
As I add more elements I'm finding that alot of code is getting repeated in my functions and although the animations applied to each element are slightly different, the principal behind them is the same, i.e. Add / Remove a class to an element with a click event and tween the element accordingly. E.g.
(function openMainMenu() {
var $openMenu =
Study this technique. An animation is created only once, not on every click. Instead, on a click you just change the reversed state of an animation. There's some logic in place so only the target element will play forward.
See the Pen wKLmzK by osublake (@osublake) on CodePen
