Introducing GsapTools by Ueno
We built a simple tool to make your animations development workflow easier.
Animation workflow as seen by a developer
Animation is important to us at Ueno. In a recent post, Gene explained how a designer creates delightful animations. When the designers are done designing, they send their animations to us, the developers, to implement them and make them work in the browser. In this post, I’ll talk about the animation process from the point-of-view of a developer, and how we built a tool to make it easier on ourselves.
Let’s talk about GSAP
GSAP, also known as GreenSock, is a fantastic and a high-performing animation platform that is supported by all major browsers.
At Ueno, we include animations in almost all of our projects. Some of them are small, some of them are bigger. To make all theses animations come to life, we use GSAP and we ❤️ it. But in everything you love, there is always a downside.
Our biggest challenge with GSAP has been debugging. To debug, we’ve had to reload endlessly to test the animation and check if timing, easing, duration and all the rest corresponds to the original design. It’s tedious and requires a lot of time.
Let’s take a look at some animations we’ve done.
A SVG shape scales up and down to show a random product. It seems simple, but behind it all there are several elements to animate, and they all need to be well-timed together to run smoothly.
This transition that shows a new layout requires us to remove the previous page and show the new one. Once we show the new layout, we make elements appear one by one. As you can imagine, it’s all about timing and delays. This requires a ton of reloads.
These animations are not so complicated, but they involve lots of elements. In both cases, the process of debugging was very repetitive and tedious.
Proof of concept
While working on a project for CTIA (see below), we created many animations across the website. Our designers provided us with motion studies to show how the animations should work. But it takes time to make these animations work well in the browser.
The first animation is a custom hero, which reanimates every time you go to a new page. Each page contains different shapes and content, so it’s a different animation for each of them. Without any tools to debug, it’s very time consuming.
These animations require lot of tweens, and using a dev tools to synchronize is useful.
After we saw all these animations required, we decided to give the official GSAP dev tools a try. We found that there were a few issues:
- Setting up the tools up with our webpack configuration was a mess. We found some ways to include it in our starter kit, but it was junky and hacky.
- Previous animations weren’t removed from the tool when we were going to another page. This meant we had animations in the dev tools that didn’t exist anymore on the actual page.
- Animations were only registered to the tool if they were played two seconds after the page was loaded. This isn’t optimal when you have have a lot of animations happening on a user action, or when the scroll position arrives at the specific point.
- It wasn’t possible to register multiple timelines from different pages, or it was duplicating the tool itself when trying to initialize a second time.
During the project, we tried to wrap the GSAP official dev tools into a top-level component to fix these issues, but it either wasn’t possible or it would require too much messy hacking.
This is just an example of how we had to hack to embed the official GSAP dev tools in components where we had animations. We also had to execute the animation first to register it through the tool; otherwise, it wasn’t defined.
At the end of the CTIA project, we spent time trying to tweak the top-level component around the official GSAP dev tools. But at the end, it wasn’t working at all. It wasn’t meeting our needs, and it wasn’t worth it to keep trying.
So we decide to build our own tool to address all these issues and add new features we thought of.
GsapTools
We use our starter-kit-universally on almost all of our projects. It uses React, so we build the tool to work with React first.
Since the official dev tools didn’t meet our needs, we took a look at features we could implement on our own tool. We started to draw some sketches on a mirror.
We added the basic features on the first tool. Of course we used the official GSAP dev tools as a reference, but we also took inspiration from After Effects. After that, we added some more advanced features: a view to expand a timeline and see all the tweens that are within it, with all the DOM elements, duration, timing and properties used.
Finally, some useful core functionality was needed: Drag-and-drop; the ability to move the tool wherever we want; to not hide the animations we are working on; being able to refresh the list of animations registered in the tool when we are navigating between pages.
To build it, we used the public GSAP functions that are available. We don’t have access to some core functions, like the official GSAP dev tools do, but we are able to do pretty much everything with the public methods.
We only have one limitation now: When you have nested timelines inside a master timeline, and you add all of them to the tool. As soon as you play a child timeline, they get removed from the master timeline, and you aren’t able to play the master one anymore. But we will find a way to fix that in the near future.
Since we will use the tool on our projects now, it has been integrated by default to our starter-kit. We will keep improving the tool and updating it.
You know pretty much everything now, so let’s take a tour of this sweet tool and its features.
1. Play/pause
This is a very basic feature, which is probably the most useful one. The ability to play/pause as you wish will allow you to tweak your animations as precisely as possible.
2. Timeline details
We often have lot of stuff going on in our animations, and being able to know how the animation is structured helps us synchronize all elements more precisely.
3. Updated animations
GsapTools is updated each time you move to another page. If there is no animation on the page you are going to, you won’t be able to use the tool. On the other hand, if you are going to a page where you registered animations, the tool will be updated automatically. Easy, right?
4. In- and out-markers
When you are working on a large animation, let’s say 40 seconds, and you have to tweak only few seconds of it, you don’t want to play it all again and again. You simply need to set up an in-marker, and out-marker, and then you can loop through the part you need to tweak.
…and there’s much more that you can discover yourself by using GsapTools on your next project!
The-30-seconds-how-to
You probably want to try it now, don’t you? Here’s a super simple example of how to set up the tool with creat-react-app.
Install the dependency
npm install gsap-tools
Import the GsapTools component on a global component (just once)
Register any animations you want to manage with the tool
Voilà!
Now, you can open the tool and manage your animation as you want! I know, it’s super simple, right?
If you want to see the full example, here’s the repository and here’s the live demo. It contains a few demos of tween and timeline with different configurations.
Help us
If you work with animations, we’d love it if you installed GsapTools and played with it. And we’d love to hear back from you. If you notice any issues, have any ideas, or want to open pull requests, there is a Github repository:
And we also created a beautiful site for it. Take a look:
Jérémy Barbet is a developer in Ueno’s Reykjavík office. In his spare time he takes photos of beautiful landscapes and posts them on his Instagram and his Facebook page.
