While working on a personal open-source project , I faced quite a few challenges to get particles animating correctly between each Docker container. Container Hive tries to help you visualize how everything fits together between your services. Here’s what that currently looks like… Container Hive Each particle is an SVG circle that looks like… <svg width='8' height='8'><circle cx='4' cy='4' r='4' fill='darkcyan' /></svg> Since I was using , I naturally leaned towards trying out . React React Motion Challenge I — Debugging Leaks while DevTools Crashes That moment when you refresh the page and then after some time passes, you see it… This was really frustrating because, not only did the tab crash, but also the DevTools window itself. I tried many approaches to profile my scripts and ended up coming up with an interesting hack. I open the console, and when the time was right, I typed and BOOM! I paused everything. All the animations stopped, the React lifecycle, React Motion, everything! I also made sure I had the tab open in the DevTools to start recording performance on page refresh. I was able to look at all the metrics and debugged performance of my scripts as well as any cpu/memory leaks. debugger Timeline Challenge II — TransitionMotion’s defaultStyles don’t work (bug) Using is great for handling multiple elements animating together and having control over mounting and unmounting of each component. But I wasn’t able to get it working using react-motion@0.4.7. The way I approached it initially was by making use of as the initial positions of each particle and then set as the final transition styles after initially starting from the . TransitionMotion defaultStyles styles defaultStyles <TransitionMotiondefaultStyles={particles.map(particle => ({key: particle.key,style: {translateX: particle.x1,translateY: particle.y1,opacity: 0}}))}styles={particles.map(particle => ({key: particle.key,style: {translateX: spring(particle.x2, particleSpring),translateY: spring(particle.y2, particleSpring),opacity: spring(1, particleSpring)}}))}>{interpolatedStyles =><div>{interpolatedStyles.map(({key, style: {opacity, translateX, translateY}}) => {return <svg key={key} width='8' height='8' style={{transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(1)`,marginTop: `${(50 / 2) - borderWidth / 2}px`,marginLeft: `${(50 / 2) - borderWidth / 2}px`,opacity: opacity,position: 'absolute',zIndex: 1000}}><circle cx='4' cy='4' r='4' fill='yellow' /></svg>})}</div>}</TransitionMotion> What happened was that the particles would just stay at the final position and never go through the phase at all. Almost like the didn’t really do anything. animation defaultStyles After three days of trying various solutions, the one that worked was to use the prop and performed all the animations by returning the final state in its callback. Effectively, ignoring the property. Here’s the working snippet. Solution: willLeave defaultStyles <TransitionMotionwillLeave={particle => {return {translateX: spring(particle.data.x2, particleSpring),translateY: spring(particle.data.y2, particleSpring),opacity: spring(1, particleSpring)}}} styles={particles.map(particle => ({key: particle.key,data: particle,style: {translateX: particle.x1,translateY: particle.y1,opacity: 0.5}}))}>{interpolatedStyles =><div>{interpolatedStyles.map(({key, style: {translateX, translateY, opacity}}, index) => {return <svg key={key} width='8' height='8' style={{transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(1)`,marginTop: `${(50 / 2) - borderWidth / 2}px`,marginLeft: `${(50 / 2) - borderWidth / 2}px`,opacity: opacity,position: 'absolute',zIndex: 1000}}><circle cx='4' cy='4' r='4' fill={allColors[index % allColors.length]} /></svg>})}</div>}</TransitionMotion> By getting rid of altogether and treating as the initial state of the animation, everything worked perfectly. I filed the issue on Github below. defaultStyles styles _react-motion - A spring that solves your animation problems._github.com TransitionMotion defaultStyles don't reflect initial state of animation · Issue #416 · chenglou… Conclusion React Motion is awesome and provides really powerful tools for animation, but it still has a few gotchas and documentation to iron out. If you use Docker in your stack, give a try. It’s a fun and interesting sight that gives you intuition on microservice networks. Container Hive

Yellow

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Animating particles using React Motion

Too Long; Didn't Read

Company Mentioned

@saada

RELATED STORIES