Here is the complete code
This is a code snippet for a Newton's Cradle animation created using React and Styled Components. The NewtonCradle function returns a Wrapper component that contains five span elements. The Wrapper component uses the display: flex property to arrange the span elements in a row.
Each span element represents a ball in the Newton's Cradle animation. The balls are created using styled-components, and their appearance is defined using CSS properties like width, height, background-color, and position. Each ball also has a ::before pseudo-element that represents the connecting string.
The first and last span elements are animated using keyframes and transform properties to simulate the swinging motion of the balls. The animation property is used to specify the animation details, such as the duration, timing function, and delay. The transform-origin property is used to specify the pivot point of the transformation.
Overall, this code snippet demonstrates how to use React and Styled Components to create an interactive and visually appealing animation.
