A while ago I was making a prototype for a flow that included quite a few steps. Tweaking animations in the later steps of the flow always seemed like a hassle, because it meant that every time I reloaded, I had to go through the whole flow again, just to see the results of the change I made. I wanted a way to tweak animation parameters and see my changes reflected immediately, without reloading. To do that, I used a combination of dat.GUI (a lightweight JS controls UI), which is typically used in a lot of WebGL demos, and a custom animation class that automatically exposed a few of the animation's parameters for "live editing". Today, I dusted off that old code, made it usable with any Framer animation and put together a quick demo to share with the group.

Let me know if you find this useful!

12 Comments

Josh Puckett

So good, like Tweaks for framer! I have a few prototypes that have the same thing, but it's not abstract at all like this appears to be at first glance (on mobile). great work Tisho!

Koen Bok

Some really cool stuff.

Florian Pnn

I was working exactly on the same thing yesterday ! :)

Koen Bok

I'm really interested in UI experiments to replace/tweak code on top of Framer. Keep em coming.

Florian Pnn

Tisho Why did you went for the "aid" things instead of just looping through all the animations existing?

Tisho Georgiev

Florian , because from personal experience, it can make it very hard to see which animation you're editing if you have a bunch of them. I'll make it an option for smaller prototypes. Looking forward to seeing what you've come up with.

Florian Pnn

Tisho I see, I didn't work on a really big prototype yet! I was also looking to make the animation looping while tweaking the settings but it seems to be hard to implement.

Tisho Georgiev

Josh , it's definitely not meant to be used directly on mobile. For that I'll need to replace the actual UI layer (dat.GUI), which will take some time.

Tisho Georgiev

Florian, that's a very good idea. You should take a look at the code for the repeat function in framer-animation-controls.js. It's totally possible to do looping using that.

Josh Puckett

Tisho: some of mine have a mobile implementation; will share when I'm back in the country. I'm unfamiliar with dat.GUI, but the only things I ever tweak are timing and spring constants, so it's heavily geared towards that.

Florian: I have something that loops an animation while you tweak it, will share when I get back.

So many exciting Framer developments in the past two weeks!

Tisho Georgiev

Sounds great, Josh. I have a few ideas of what I want in a mobile UI for something like this, but it would be great to sync up on similar efforts.