Jump to content
GreenSock

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

How to toggle tweens in a DRY fashion

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

8 hours ago, maxxheth said:

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.

 

 

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

 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

I've read a lot of articles on why ES6 classes are bad, and I can summarize every single one of them.

 

Classes are bad, classical inheritance is bad, functional programming is good. 

 

It's all opinions. I'm not saying there's no merit to their claims, but there are no technical reasons for why classes are bad.

 

But here's the thing about classes, what they do isn't new. It's mostly just syntactic sugar for constructor functions.

https://hacks.mozilla.org/2015/07/es6-in-depth-classes/

 

I personally use classes all the time. The biggest argument against using classes is one of the reasons why I like using them, classical inheritance, creating a class from another class. The people that wrote those articles would consider my CustomSprite class bad, but they would be OK with my CustomElement class. They're essentially doing the same thing.

 

See how to create a custom element. You need to use a class.

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

 

// Inherits from PIXI.Sprite
class CustomSprite extends PIXI.Sprite {  
  constructor() {
    super();
  }  
  
  customMethod() {
    
  }
}

// Inherits from HTMLElement
class CustomElement extends HTMLElement {
  constructor() {
    super();
  }
  
  customMethod() {
    
  }
}

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×