react-marquee-slider
Demo and playground

Reviews

Here is the essential code for the above example, or you can have a more in depth look at the original, full code:

import React from "react";
import Marquee from "react-marquee-slider";
import times from "lodash/times";

const Reviews = () => (
  <Marquee key={key} velocity={25} scatterRandomly minScale={0.7}>
    {times(5, String).map(id => (
      <Box key={`marquee-example-review-${id}`}>
        <Review>
          <Avatar>
            <img src="https://randomuser.me/api/portraits/women/68.jpg" />
          </Avatar>
          <Content>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua.
            </p>
          </Content>
        </Review>
      </Box>
    ))}
  </Marquee>
);

Companies

Here is the essential code for the above example, or you can have a more in depth look at the original, full code:

import React from "react";
import Marquee, { Motion } from "react-marquee-slider";
import times from "lodash/times";

const Reviews = () => (
  <FullWidth>
    <Height height={500}>
      <Marquee key={key} velocity={12} scatterRandomly minScale={0.7} resetAfterTries={200}>
        {_.times(8, Number).map(id => (
          <Motion
            key={`marquee-example-company-${id}`}
            initDeg={randomIntFromInterval(0, 360)}
            direction={Math.random() > 0.5 ? "clockwise" : "counterclockwise"}
            velocity={10}
            radius={scale * 100}
          >
            <Company scale={scale}>
              <Circle scale={scale}>
                <Logo src={icons[id]} />
              </Circle>
            </Company>
          </Motion>
        ))}
      </Marquee>
    </Height>
  </FullWidth>
);

People

Here is the essential code for the above example, or you can have a more in depth look at the original, full code:

import React from "react";
import Marquee from "react-marquee-slider";
import styled from "styled-components";
import times from "lodash/times";

const Photo = styled.img`
  width: 368px;
  height: 200px;
  border-radius: 4px;
  box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.12);
  object-fit: cover;
  object-position: top;
`;

const Reviews = () => (
  <div>
    <div style={{ height: 200 }}>
      <Marquee key={key} velocity={25}>
        {times(7, Number).map(id => (
          <Photo src={photos[id]} key={`marquee-example-people-${id}`} style={{ 
            marginLeft: "87px",
          }} />
        ))}
      </Marquee>
    </div>

    <div style={{ height: scale * 60 }} />
    
    <div style={{ height: 200 }}>
      <Marquee key={key} velocity={25}>
        {times(7, Number).map(id => (
          <Photo
            src={photos[id + 7]}
            key={`marquee-example-people-${id + 7}`}
            style={{ 
              marginLeft: "7px",
              marginRight: "80px",
            }}
          />
        ))}
      </Marquee>
    </div>
  </div>
);

Playground

Container background color:

Child background color:

SolarSystem background color:

Earth background color:

Icons amount:8

How many icons to show. The less icons, the easier it is to find space for icons. The higher you put this, the higher you should set the container height, too. Wide screens also help.

8

Direction:

Left to right

Right to left

Random positioning:

Scatter randomly

Container height:500

The higher the more space, the easier the component will find space to position the children if `scatter randomly` is activated

500

Reset after retries:200

200

Show loading overlay

Velocity:15px / s

15

Pause / Resume:

This is a shortcut to toggling velocity to 0 and back, without going through all the other values of the slider that come before 0.

Pause slider

Motion velocity:15px / s

15

Motion radius:100px

The icons each are encapsuled in another `div`, which rotates (hence the circular motion). However, these motion containers are the actual children and larger than the icons (play around with `SolarSystem` color palette to make the visible). Therefore: Don't make the radius too large, because it will cloak up the available space and slow down computation.

100

Scale:min(0.7) max(1)

0.71

The above Marquee is still rendering.

Have a look at the original, full code for this example or just the basic, simplified gist: