Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

provide a easy way to know the percentage of animation?

See original GitHub issue

For example, I change a cube’s x position using spring, and want the background-color to change proportion to the percentage of animation. Is it possible?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:11

github_iconTop GitHub Comments

nkbtcommented, Nov 23, 2016

@lzl124631x you can animate arbitrary numbers with react motion, and derive color from that number. Effectively:

 <Motion style={{value: spring(255)}} >
  {({value}) => {
    const color = `rgb(${value}, ${value}, ${value})`;
sompylasarcommented, Mar 8, 2017

@tannerlinsley Good job there! I meant one cannot get the time-based percentage because the time moment when physical animation ends is not known in advance, without premodeling it. The value-based percentage can definitely be obtained, that’s what is in the block you’ve shown. And it might overshoot in case of a spring (the complex easing curves can, too, so it should be fine).

Read more comments on GitHub >

github_iconTop Results From Across the Web

What Are the 12 Principles of Animation? - Pluralsight
The easiest way to understand how squash and stretch work is to look at a bouncing ball. As the ball starts to fall...
Read more >
Animation for Beginners (Where do I start?)
I'll go over what is animation, what it takes to make animated movies (2D or 3D), and even how to start looking for...
Read more >
21 Best Animation Tips for Beginners and Beyond - Skillshare
It can also give the viewer information about how hard or soft the object is (softer objects should squash and stretch more). If...
Read more >
Animate text or objects - Microsoft Support
Learn how to add animation effects to your PowerPoint presentation.
Read more >
Customizing the Transition Animations - Apple Developer
The value you compute represents the completion percentage for the entire length of the animation. For interactive animations, you might want to ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found