MImiklo·Apr 26, 2016Submission
React Show HN: Animated This.setState
1 points · Open discussionchenglou
react-tween-state
JavaScript2014–2016
chenglou / react-tween-state
react-tween-state
React animation.
4Distinct people
5Mentions
0Explicit recommenders
1.7KGitHub stars
What to know before exploring
What it is
React animation.
GitHub
Where it is used
No documented product use has been verified yet.
What people are saying
No recommendation phrase was found in the indexed comments.
No classified warning is attached to this page. Read the discussions before treating silence as approval.
Also in these discussions
No other repository is repeatedly linked in the same discussions.
This week on Hacker News
Nov 7–Nov 14 UTC · Direct repository links and separately labeled related project stories. Indexed through 11/14/2026, 1:49:46 PM UTC.
No direct repository links were found in the indexed HN discussions over the past seven days. Older discussions are available below.
Mentions over time
HN mentions by month5 dated mentions
Observed mentions: 2014-07-21 17:44:07 UTC to 2016-04-26 15:29:33 UTC.
Counts come from the repository’s dated source evidence. Index cutoff: 2026-11-02 08:16:59 UTC.
View mention counts and date ranges
| Period | Start (UTC) | End (exclusive, UTC) | Mentions | Submissions | Comments |
|---|---|---|---|---|---|
| Jul 2014 | 2014-07-01 00:00:00 UTC | 2014-08-01 00:00:00 UTC | 1 | 0 | 1 |
| Aug 2014 | 2014-08-01 00:00:00 UTC | 2014-09-01 00:00:00 UTC | 0 | 0 | 0 |
| Sep 2014 | 2014-09-01 00:00:00 UTC | 2014-10-01 00:00:00 UTC | 0 | 0 | 0 |
| Oct 2014 | 2014-10-01 00:00:00 UTC | 2014-11-01 00:00:00 UTC | 0 | 0 | 0 |
| Nov 2014 | 2014-11-01 00:00:00 UTC | 2014-12-01 00:00:00 UTC | 2 | 1 | 1 |
| Dec 2014 | 2014-12-01 00:00:00 UTC | 2015-01-01 00:00:00 UTC | 0 | 0 | 0 |
| Jan 2015 | 2015-01-01 00:00:00 UTC | 2015-02-01 00:00:00 UTC | 0 | 0 | 0 |
| Feb 2015 | 2015-02-01 00:00:00 UTC | 2015-03-01 00:00:00 UTC | 1 | 0 | 1 |
| Mar 2015 | 2015-03-01 00:00:00 UTC | 2015-04-01 00:00:00 UTC | 0 | 0 | 0 |
| Apr 2015 | 2015-04-01 00:00:00 UTC | 2015-05-01 00:00:00 UTC | 0 | 0 | 0 |
| May 2015 | 2015-05-01 00:00:00 UTC | 2015-06-01 00:00:00 UTC | 0 | 0 | 0 |
| Jun 2015 | 2015-06-01 00:00:00 UTC | 2015-07-01 00:00:00 UTC | 0 | 0 | 0 |
| Jul 2015 | 2015-07-01 00:00:00 UTC | 2015-08-01 00:00:00 UTC | 0 | 0 | 0 |
| Aug 2015 | 2015-08-01 00:00:00 UTC | 2015-09-01 00:00:00 UTC | 0 | 0 | 0 |
| Sep 2015 | 2015-09-01 00:00:00 UTC | 2015-10-01 00:00:00 UTC | 0 | 0 | 0 |
| Oct 2015 | 2015-10-01 00:00:00 UTC | 2015-11-01 00:00:00 UTC | 0 | 0 | 0 |
| Nov 2015 | 2015-11-01 00:00:00 UTC | 2015-12-01 00:00:00 UTC | 0 | 0 | 0 |
| Dec 2015 | 2015-12-01 00:00:00 UTC | 2016-01-01 00:00:00 UTC | 0 | 0 | 0 |
| Jan 2016 | 2016-01-01 00:00:00 UTC | 2016-02-01 00:00:00 UTC | 0 | 0 | 0 |
| Feb 2016 | 2016-02-01 00:00:00 UTC | 2016-03-01 00:00:00 UTC | 0 | 0 | 0 |
| Mar 2016 | 2016-03-01 00:00:00 UTC | 2016-04-01 00:00:00 UTC | 0 | 0 | 0 |
| Apr 2016 | 2016-04-01 00:00:00 UTC | 2016-05-01 00:00:00 UTC | 1 | 1 | 0 |
What Hacker News says
5 sourcesProps go to Josh Hillier (https://twitter.com/_joshhillier/) and his Pen (http://codepen.io/joshy/details/cojbD). I later converted it to use React Tween State (https://github.com/chenglou/react-tween-state) for animation.
Gadzhi (you may know him as the designer behind Sublime Spacegray theme, http://kkga.me/) helped polish the logo and added the outer animation. It's currently in CSS but I plan to to move it into the component as well.
Logo source code: https://github.com/gaearon/react-hot-loader/blob/gh-pages/_i...
In React Hot Loader: Tweak React Components in Real TimeThere's been a few React animation experiments (including my own: https://github.com/chenglou/react-tween-state), but I think there are two main problems here and this library, albeit nice, is mingling the two:
- Actual transition API (e.g. fade in over a period of 1s while moving in from left). Interruptible and composable. My lib and most libs I've seen are geared toward this.
- API for transitioning in/out and moving around. This is the actual hard part that TransitionGroup is trying to tackle. How do you express an "animating out" API (that's also interruptible?) when the item doesn't exist anymore at the next render? Can you stop the component from unmounting midway, and potentially bring it back through an "un-unmounting" API? I haven't seen a library that actually tackles this problem. We can debate about a good API all we want for
Read the rest
animation but as long as this problem isn't solved, the whole animation problem isn't imo.
These two are separate issues. Ideally I think you should pull out the velocity part and create a wrapper API around it, and solve transitioning in/out independently.
(I'm actively searching for solutions, so please ping me in #reactjs if you have good ideas. Here are a few messy ones to begin with: https://gist.github.com/chenglou/40b75d820123a9ed53d8).
Care to try out https://github.com/chenglou/react-tween-state? I've been experimenting with animation in React and would love to see the general paradigm behind this and implement it in React.
In Virtual DOM in Elm