Text + Circle Carousel 3

Add it to your video

It runs for 5 seconds at 1920×1080. Paste this into your composition:

index.html

<div
  data-composition-id="carousel-text-circle-3"
  data-composition-src="compositions/carousel-text-circle-3.html"
  data-start="0"
  data-duration="5"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:

Variable	Default	Accepts	What it does
`image1`	`assets/carousel-images/artist-bob-seger.jpg`	image	Image on card 1 of 12. Any aspect; it is fitted into the card box.
`image2`	`assets/carousel-images/artist-dire-straits.jpg`	image	Image on card 2 of 12. Any aspect; it is fitted into the card box.
`image3`	`assets/carousel-images/artist-faces.jpg`	image	Image on card 3 of 12. Any aspect; it is fitted into the card box.
`image4`	`assets/carousel-images/artist-little-feat.jpg`	image	Image on card 4 of 12. Any aspect; it is fitted into the card box.
`image5`	`assets/carousel-images/artist-north-mississippi-allstars.jpg`	image	Image on card 5 of 12. Any aspect; it is fitted into the card box.
`image6`	`assets/carousel-images/artist-sea-level.jpg`	image	Image on card 6 of 12. Any aspect; it is fitted into the card box.
`image7`	`assets/carousel-images/artist-taj-mahal.jpg`	image	Image on card 7 of 12. Any aspect; it is fitted into the card box.
`image8`	`assets/carousel-images/artist-tool.jpg`	image	Image on card 8 of 12. Any aspect; it is fitted into the card box.
`image9`	`assets/carousel-images/artist-van-morrison.jpg`	image	Image on card 9 of 12. Any aspect; it is fitted into the card box.
`image10`	`assets/carousel-images/pl-10-songs.jpg`	image	Image on card 10 of 12. Any aspect; it is fitted into the card box.
`image11`	`assets/carousel-images/pl-bangers.jpg`	image	Image on card 11 of 12. Any aspect; it is fitted into the card box.
`image12`	`assets/carousel-images/pl-bhindi-bhagee.jpg`	image	Image on card 12 of 12. Any aspect; it is fitted into the card box.
`line1`	`Carousels are so in`	string	First line; words reveal one by one right to left and drift to centre.
`line2`	`so we made them in hf`	string	Line after the hard cut; arrives at 1.4× and settles to 1.0.
`speed`	`1`	0.25 to 3, step 0.05	Time scale of the carousel motion. 1 = the designed pace.
`background`	`#EDEDEF`	color	Composition ground.

Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:

<div
  data-composition-id="carousel-text-circle-3"
  data-composition-src="compositions/carousel-text-circle-3.html"
  data-variable-values='{"image1":"assets/carousel-images/artist-bob-seger.jpg","image2":"assets/carousel-images/artist-dire-straits.jpg","image3":"assets/carousel-images/artist-faces.jpg","image4":"assets/carousel-images/artist-little-feat.jpg","image5":"assets/carousel-images/artist-north-mississippi-allstars.jpg","image6":"assets/carousel-images/artist-sea-level.jpg","image7":"assets/carousel-images/artist-taj-mahal.jpg","image8":"assets/carousel-images/artist-tool.jpg","image9":"assets/carousel-images/artist-van-morrison.jpg","image10":"assets/carousel-images/pl-10-songs.jpg","image11":"assets/carousel-images/pl-bangers.jpg","image12":"assets/carousel-images/pl-bhindi-bhagee.jpg","line1":"Carousels are so in","line2":"so we made them in hf","speed":1,"background":"#EDEDEF"}'
></div>

Tagged carousel title-card kinetic-text images showcase circle.Created by Jake Moran.

Catalog

Text + Circle Carousel 3

Add it to your video

Variables

Related topics