GSAP with dat.GUI

[OSUblake 18,475 Likes (Superhero)]

I like using dat.GUI to quickly test out different values for my animations, but it requires building custom functions to update everything, which can be time consuming and require a lot of code.

 

So I wrote a template parser to make updating values easier. It will inject the new values in template for you.

 

Really easy to use. Create your settings.

const settings = {
  myValue: 100,
  name: "Blake",
  color: "#ff0000"
};

const gui = new dat.GUI();
gui.add(settings, "name").onChange(update);
gui.addColor(settings, "color").onChange(update);

// number values are min, max, and step
gui.add(settings, "myValue", 0, 500, 1).onChange(update);

 

And in the template, it will replace everything wrapped in the delimiter with the current settings.

 

<template id="template">
  
  <style>
    .info {
      color: $_color_$;
    }
  </style>
  
  <div class="info">Hello, $_name_$</div>
  
  <script>
    gsap.to(".foo", {
      x: $_myValue_$
    });
  </script>
</template>

 

 

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