Animation in iTwin.js

Checkout the code here!

A few weeks ago, I was thrilled to publish my very first blogpost. It was about creating what I called a “car ant farm” in iTwin.js. As soon as I put the post out…it got tons of buzz.

Mostly because of the carefully crafted animations:

Pretty cool, right?

So how did I make this happen?

Here’s the story of how I made a video explaining the subject — Animating in iTwin.js. It begins on a dark and stormy evening…

SCENE 1

LOCATION: Claudia’s closet.

It’s the perfect recording place in her apartment. She stuffs it full of pillows (for good acoustics) and completely disregards the lack of ventilation in her 40 square feet of captivity. It’s the middle of the summer, in the southern United States. After countless recording sessions, she ends up with a 45 minute video, a nearly lost voice, and a shattered will to ever record again.

SCENE 2

LOCATION: Team call.

She takes a deep breath — and asks her team for feedback.

The sound of yawning echoes through the virtual room. Everyone thinks the exact same thing. The video is way too long.

One of the teammates breaks the uncomfortable silence, “what if we considered a different approach? What if we explained this using a flipbook?”

“I have a pile of those on my desk right now!” announces the team manager. His kids happen to be avid flipbook makers. He sends Claudia a recording after the meeting. It involves the harrowing experience of a person being pulled by a tractor beam into a UFO:

Re-invigorated by the analogy, Claudia darts back into the closet and once again hits the record button.

And that’s the story of how I successfully explained iTwin.js animations (in only 4 minutes). You can check it out below!

Aftermath — I rediscovered my confidence…and found my creative voice. Bonus: I also found out that my closet can be used as a wonderful sauna.

— Claudia

• To get started with iTwin.js checkout our developer page at iTwin Platform.
• For other cool samples and sandboxes, visit our samples page.