Jump to content
Search Community

GSAP with dat.GUI

OSUblake test
Moderator Tag

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">
    .info {
      color: $_color_$;
  <div class="info">Hello, $_name_$</div>
    gsap.to(".foo", {
      x: $_myValue_$



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

  • Like 8
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.
  • Create New...