Jump to content
GreenSock

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

GSAP with dat.GUI

Recommended Posts

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

  • Like 7

Share this post


Link to post
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.

×