Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SKINN BRANDING AGENCY

Updating GSAP values on the fly

Recommended Posts

We are working on an animation library for our designers and are using GSAP for this purpose. One of their requests was a way to control certain predetermined parameters (e.g. speed, scrub, position, ...) to allow them to tweak the animations to their liking.

 

We chose CodePen as a base because it allows us to quickly set up new animations via the templates. The biggest hurdle to overcome is getting the updated values passed through GSAP, and having it update/refresh quickly.

 

To faciliate the interaction, I came across a pen from OSUblake which implements dat.GUI with GSAP. This seemed like an ideal solution, but the implementation using an iframe has a side effect of requiring all code, both HTML and JS, to be placed in the DOM.

 

Before I spend another day trying to overcome this, are there any other examples of GSAP being used like this?

 

See the Pen bf8fc5de8184ac2f10c6cff5e14db733 by skinnbrandingagency (@skinnbrandingagency) on CodePen

Link to comment
Share on other sites

Phew, that's quite an ask. I'd probably just make some nicely labelled variables in codepen and show the designers how to update them in the code. 😅

I don't think you'll find any other solution better than Blakes out there honestly. Obviously other folks are welcome to jump in!

Link to comment
Share on other sites

14 hours ago, SKINN BRANDING AGENCY said:

To faciliate the interaction, I came across a pen from OSUblake which implements dat.GUI with GSAP. This seemed like an ideal solution, but the implementation using an iframe has a side effect of requiring all code, both HTML and JS, to be placed in the DOM.

 

That's a very simplified version that just shows how everything gets combined and rendered. The real version has the HTML, CSS, and JS separated out into different files. The json file contains all the settings. 

 

const urls = [
  "./widget.json",
  "./widget.html",
  "./widget.css",
  "./widget.js",
];

async init() {

  let [ json, html, css, js ] = await loadFiles(urls);
  json = JSON.parse(json);
  config = JSON.parse(config);

  template = `
    <html>
      <head>
        <style>${css}</style>
      </head>
      <body>
        ${html}
        <script>${js}</script>
      </body>
    </html>
  `;

  ...
}

async function loadFiles(urls) {
  const responses = await Promise.all(urls.map(url => fetch(url)));
  return await Promise.all(responses.map(response => response.text()));
}

 

And then all the designers have to do is run a npm script, and it launches the app and automatically updates.

 

The HTML, CSS, and JS files use the $_myVariable _$ syntax for the settings so it doesn't throw errors in the code editor.

 

  • Like 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.
×