Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

maxxheth

Members
  • Posts

    7
  • Joined

  • Last visited

Posts posted by maxxheth

  1. 7 hours ago, OSUblake said:

     

     

    Gotcha. I wasn't sure if you wanted to target single and multiple elements, so that's why I brought up the event emitter. It's a great way to keep things decoupled. That's actually how reactive libraries like React, Vue, Angular and RxJS work, although they call it a observer/observable.

     

    A silly event emitter demo I made for another thread. 45 different input ranges are being driven by animating a simple object.

     

    See the Pen Lzxwee by osublake (@osublake) on CodePen

     

     

    Cool...I'll have to play around with that sometime. =)

     

    Yeah, I haven't really dug into any of the frameworks (though I do use NPM and Browserify as part of my core tooling, so I'm not completely out of the loop as far as modern JS goes...lol), but React and Vue seem interesting.

     

    On another note, I have sort of a personal question: do you use the class function in your projects a lot and do you feel it offers advantages over using constructor functions or factory functions as far as your work goes?

     

    There seems to be a lot of upheaval about the introduction of classes into ES6 and something I've been researching on and off ever since I took a deep dive into JavaScript last summer.

     

    For context, I knew some JS and jQuery then (though not that much), but I ended up having to ramp up my JS skills very quickly for a web design project that required some substantial customization on the frontend and backend, so I kickstarted my ES6 journey with a trial by fire, so to speak.

     

    Anymore, it seems that best practices in JS are a constantly moving target. 

  2. 17 hours ago, OSUblake said:

     

     

    The only thing I would have done differently is to handle the click inside the createAnimation function.

     

    
    const createAnimation = (element) => {
      let tween = TweenLite.to(element, 1, {
        width: 400,
        backgroundColor: "#673AB7",
        borderRadius: 0,
        ease: Elastic.easeOut
      }).reverse();
    
      element.addEventListener("click", () => tween.reversed(!tween.reversed()));
    }

     

     

    Yeah, fair enough! I guess I just wanted to be able to switch back and forth between being able to target single elements and multiple elements on a whim, but your event emitter / data attribute solution works perfectly for that as well.

  3. 17 hours ago, OSUblake said:

     

    Thanks Blake! That's pretty handy! I like how you used the event emitter plugin and data attributes to toggle the tween for the whole set. 

     

    Yeah, not looping when you don't have to is def ideal.

     

    17 hours ago, OSUblake said:

     

    I'd just let each element handle the click individually instead of looping through the entire set.

     

     

    And who needs loops when you can when you can emit events. I do that a lot in games.

     

    See the Pen xWvbRP by osublake (@osublake) on CodePen

     

     

    17 hours ago, OSUblake said:

    I'd just let each element handle the click individually instead of looping through the entire set.

     

     

    And who needs loops when you can when you can emit events. I do that a lot in games.

     

    See the Pen xWvbRP by osublake (@osublake) on CodePen

     

     

  4. Actually, I managed to figure it out. I tried working it out in the code itself, but the easiest way is to just to target each element through its own class or ID and and run it through each function individually. Since each element will reside in its own array, the reverse / toggle logic will only apply to the element inside that array.

     

    Maybe there's a better way (I'm always open to suggestions!), but this will work for my purposes. =) 

     

    See the Pen RxpbZe by maxxheth (@maxxheth) on CodePen

     

    • Like 1
  5. On 11/26/2015 at 3:18 PM, OSUblake said:

    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.

     

    http://codepen.io/osublake/pen/wKLmzK/

    Hey everyone! So I realize this thread is really old, but I was messing around with Blake's implementation of the jQuery / TweenLite animation toggle last night and ended up rewriting it in vanilla JS in case anyone's interested in using that instead of jQuery for whatever reason: 

    See the Pen RxpbZe by maxxheth (@maxxheth) on CodePen

     

     

    • Like 2
    • Thanks 1
×