loading...

Easy Timeline Animation with Plaintext

hashrock profile image hashrock ・1 min read

I love Adobe Flash's timeline UI.
It's super easy to create complex timeline animations.

Alt Text

But actually Flash is dead... (still Adobe Animate is living)

Okay, I have an idea. Expressing the timeline UI with plaintext.

Alt Text

Then I made an animation library.

timelineDown

Please watch how it works.

Alt Text

Yey. It's useful for tweaking animation timings, isn't it?

It's also work with data attibutes. No JS config required.

Alt Text

but I think writing JS is the best way to manage multiple timelines.

Alt Text

Source

It's only 27 lines of code, because it is actually an wrapper of gsap.timeline.

Alt Text

This library is still PoC, I'm planning to make breaking changes for support ScrollMagic.

Repository

https://github.com/hashrock/timelineDown

I also published this to npm. Enjoy!

Discussion

pic
Editor guide