React-motion: How to do basic highlight-then-fade?

[dlong500]

I'm sure I'm just missing something but I still haven't been able to wrap my head around using react-motion to implement a simple highlight-then-fade animation.

All I want to do is a basic highlight by animating the background color opacity from 0 to 1 when a specific prop is true and then fade the opacity back to zero after 2 seconds. If the prop changes back to false I don't want that to affect any animation in progress.

Am I being clear enough?

[nkbt]

You can check https://github.com/nkbt/react-motion-loop
If it does not fit directly, check how it is done and modify for your case
On Sat, 30 Jul 2016 at 18:14, Davison Long [email protected] wrote:

I'm sure I'm just missing something but I still haven't been able to wrap
my head around using react-motion to implement a simple highlight-then-fade
animation.

All I want to do is a basic highlight by animating the background color
opacity from 0 to 1 when a specific prop is true and then fade the opacity
back to zero after 2 seconds. If the prop changes back to false I don't
want that to affect any animation in progress.

Am I being clear enough?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/chenglou/react-motion/issues/354, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKsoAXpdHziDud6GNbw_LKa3ctUZrTqks5qawgBgaJpZM4JYwfA
.

[dlong500]

Thanks for the reference--I'll have to experiment some. I love react in general (and redux too) but I'm still frustrated that so much effort has to be put into something as simple as a highlight on change effect (aka "yellow fade"). This type of thing outside of React would involve just one or two lines of code.

For what it's worth I don't think I've actually seen as single react-based demo of what I'm trying to do. The combination of animating in place components, colors with alpha channels, and chaining to fade back out seems to be harder and more difficult to animate than all the fancy animation demos out there.

Maybe it might be worth making a basic demo page with the types of basic animations used heavily in production sites to create good UX feedback?

[nkbt]

The problem really exists only when you are trying to use the wrong tool.
For disposable non-controllable throw-away animations like you are talking
about the best way is to stick to css transitions. In our projects we use
css transitions quite a lot, though they are always limited to the very
basic stuff, that we do not care of controlling at all.

As soon as we want some more time and space precision, interruptability,
animating more complex JS values - we go with react-motion. And it works
perfectly.

Choose your battles ;)

On Sun, Jul 31, 2016 at 7:18 AM Davison Long [email protected]
wrote:

Thanks for the reference--I'll have to experiment some. I love react in
general (and redux too) but I'm still frustrated that so much effort has to
be put into something as simple as a highlight on change effect (aka
"yellow fade"). This type of thing outside of React would involve just one
or two lines of code.

For what it's worth I don't think I've actually seen as single react-based
demo of what I'm trying to do. The combination of animating in place
components, colors with alpha channels, and chaining to fade back out seems
to be harder and more difficult to animate than all the fancy animation
demos out there.

Maybe it might be worth making a basic demo page with the types of basic
animations used heavily in production sites to create good UX feedback?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/chenglou/react-motion/issues/354#issuecomment-236390479,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKsoDfQYYdDmCs6kP8ZTb2lFNha7KLvks5qa7-egaJpZM4JYwfA
.

[dlong500]

I get what you're saying, and it also doesn't help that I'm not a full-time coder so my expertise isn't up to par with a lot of other people. I've tried using more simplified CSS transitions with react's CSSTransitionGroup and still got stymied on this particular case. However, that was some time ago and there were some serious bugs that may have since been worked out in later react versions. It also doesn't help that CSSTransitionGroup is geared towards adding and removing components when I'm trying to highlight an existing component upon a prop change.

In any case, I wish I could find someone who was already doing what I'm trying to do and that might give me some clarity. Maybe I'm making it more complicated than it needs to be... but thanks for the feedback anyway.

[dozoisch]

Depending on what you are doing, you might not even need a CSSTransitionGroup. You can use pure css keyframes for that kind of animation! when you detect the change you can just add the class.

[nkbt]

@dozoisch exactly, I actually meant using pure css. We never use CSSTransitionGroup

[nkbt]

@dlong500 check out http://www.reactiflux.com there are always heaps of people (myself included) in your timezone and you can have some real-time talk there in appropriate channel

[dlong500]

Great, thanks for all the quick feedback. I'll experiment and look into the reactiflux community as well.

[sompylasar]

To make a wave animation, you could map a linear transition to a wave with a simple math function like a sine (Math.sin(x) where x transitions from 0 to 1 with react-motion). You could tweak the math function to formulate a wave you like.

[dlong500]

So I'm closing this because it did end up being ridiculously simple to just add CSS classes on the fly (especially using the classnames module).

The only tricky part is that I had to add a timer and maintain some local state so that another change to the monitored prop wouldn't immediately wipe out the in-progress CSS animation. Just in case anyone is curious, all I needed to get the affect I was looking for is something like this:

.info-block {
    animation-name: anim-info-updated;
    animation-duration: 8s;
}

@keyframes anim-info-updated {
    0% {
      border: 2px solid green;
      background-color:  rgba(0, 128, 0, 0.5);
      color: rgb(0, 64, 0);
    }
    4% {
      border: 2px solid transparent;
    }
    8% {
      border: 2px solid green;
    }
    12% {
      border: 2px solid transparent;
    }
    16% {
      border: 2px solid green;
    }
    50% {
      border: 2px solid green;
      background-color:  rgba(0, 128, 0, 0.5);
      color: rgb(0, 64, 0);
    }
    100% {
      border: 2px solid transparent;
      background-color:  rgba(0, 128, 0, 0);
      color: rgb(0, 128, 0);
    }
}

So thanks for pointing me in the right direction (including the bit about avoiding CSSTransitionGroup). It ending up being so much easier than I ever though it would. I don't know if anything changed since I first started using react a little over a year ago, but I somehow had the mistaken impression that the react internals would screw up CSS animations unless things were done some special "react way".