What are the steps for creating animated text that follows the outline of an oval?

Question

What are the steps for creating animated text that follows the outline of an oval?

I am attempting to create a text animation around an oval shape, similar to the one shown below:

While I have found solutions for animating text in a circular pattern, I am experiencing issues when trying to adapt it for an oval shape.

Does anyone have any insight on how to achieve this effect? Your assistance would be greatly appreciated.

Here is the code snippet for creating the animation with a circle:

var radius = 200; // adjust to move items in and out
var fields = $('.carousel__item'),
  container = $('.carousel'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

.carousel {
  width: 400px;
  height: 400px;
  margin: 10px auto;
  position: relative;
  border-radius: 50%;
  animation: spin 60s linear infinite;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel:hover .carousel__item {
  animation-play-state: paused;
}

.carousel__item {
  text-align: center;
  width: 300px;
  position: absolute;
  animation: spin 60s linear infinite reverse;
  font-size: 1.4rem;
}

@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

.carousel__item:hover {
  animation-play-state: paused;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
  <div class="carousel__item">TEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
</div>

javascript html jquery css css-animations

Answer 1

Answer №1

If you want a simple solution without complex calculations, you can control the shape using width and height. The text will rotate around the border, creating either a circle (when width = height) or an ellipse (when height != width).

All you need is some JavaScript to set a different delay for each element.

var delay = 0,
  step = 5 / $('.carousel__item').length; /* 5 represents the animation duration */
$('.carousel__item').each(function() {
  $(this).css('animation-delay', -delay + "s");
  delay += step;
})

.carousel {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid;
}

.carousel__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: 
    move-x 5s linear infinite, 
    move-y 5s linear infinite;
  font-size: 1.4rem;
}

.carousel:hover .carousel__item {
  animation-play-state: paused;
}

@keyframes move-x {
  0% {
    left: 0;
    animation-timing-function: ease-in;
  }
  25% {
    left: 50%;
    animation-timing-function: ease-out;
  }
  50% {
    left: 100%;
    animation-timing-function: ease-in;
  }
  75% {
    left: 50%;
    animation-timing-function: ease-out;
  }
  100% {
    left: 0%;
    animation-timing-function: ease-in;
  }
}

@keyframes move-y {
  0% {
    top: 50%;
    animation-timing-function: ease-out;
  }
  25% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 50%;
    animation-timing-function: ease-out;
  }
  75% {
    top: 100%;
    animation-timing-function: ease-in;
  }
  100% {
    top: 50%;
    animation-timing-function: ease-out;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">

Answer 2

If you want a simple solution without complex calculations, you can control the shape using width and height. The text will rotate around the border, creating either a circle (when width = height) or an ellipse (when height != width).

All you need is some JavaScript to set a different delay for each element.

var delay = 0,
  step = 5 / $('.carousel__item').length; /* 5 represents the animation duration */
$('.carousel__item').each(function() {
  $(this).css('animation-delay', -delay + "s");
  delay += step;
})

.carousel {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid;
}

.carousel__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: 
    move-x 5s linear infinite, 
    move-y 5s linear infinite;
  font-size: 1.4rem;
}

.carousel:hover .carousel__item {
  animation-play-state: paused;
}

@keyframes move-x {
  0% {
    left: 0;
    animation-timing-function: ease-in;
  }
  25% {
    left: 50%;
    animation-timing-function: ease-out;
  }
  50% {
    left: 100%;
    animation-timing-function: ease-in;
  }
  75% {
    left: 50%;
    animation-timing-function: ease-out;
  }
  100% {
    left: 0%;
    animation-timing-function: ease-in;
  }
}

@keyframes move-y {
  0% {
    top: 50%;
    animation-timing-function: ease-out;
  }
  25% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 50%;
    animation-timing-function: ease-out;
  }
  75% {
    top: 100%;
    animation-timing-function: ease-in;
  }
  100% {
    top: 50%;
    animation-timing-function: ease-out;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">

Answer 3

Answer №2

If you want to achieve this effect, you can utilize the offset-path property in modern browsers.

To generate the path of an ellipse, you can make use of this tool.

.carousel {
  position: relative;
  left: 300px;
  top: 100px;
}

.carousel__item {
  position: absolute;
  offset-path: path('M-200,0a200,100 0 1,0 400,0a200,100 0 1,0 -400,0');
  offset-rotate: 0deg;
  animation: elipse 4s linear infinite;
}

@keyframes elipse {
  0% {
    offset-distance: 100%;
  }
  100% {
    offset-distance: 0%;
  }
}

.carousel__item:nth-child(2) {
  animation-delay: calc(-4s * 1 / 8);
}

.carousel__item:nth-child(3) {
  animation-delay: calc(-4s * 2 / 8);
}

.carousel__item:nth-child(4) {
  animation-delay: calc(-4s * 3 / 8);
}

.carousel__item:nth-child(5) {
  animation-delay: calc(-4s * 4 / 8);
}

.carousel__item:nth-child(6) {
  animation-delay: calc(-4s * 5 / 8);
}

.carousel__item:nth-child(7) {
  animation-delay: calc(-4s * 6 / 8);
}

.carousel__item:nth-child(8) {
  animation-delay: calc(-4s * 7 / 8);
}

<div class="carousel">
  <div class="carousel__item">TEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
</div>

Answer 4

If you want to achieve this effect, you can utilize the offset-path property in modern browsers.

To generate the path of an ellipse, you can make use of this tool.

.carousel {
  position: relative;
  left: 300px;
  top: 100px;
}

.carousel__item {
  position: absolute;
  offset-path: path('M-200,0a200,100 0 1,0 400,0a200,100 0 1,0 -400,0');
  offset-rotate: 0deg;
  animation: elipse 4s linear infinite;
}

@keyframes elipse {
  0% {
    offset-distance: 100%;
  }
  100% {
    offset-distance: 0%;
  }
}

.carousel__item:nth-child(2) {
  animation-delay: calc(-4s * 1 / 8);
}

.carousel__item:nth-child(3) {
  animation-delay: calc(-4s * 2 / 8);
}

.carousel__item:nth-child(4) {
  animation-delay: calc(-4s * 3 / 8);
}

.carousel__item:nth-child(5) {
  animation-delay: calc(-4s * 4 / 8);
}

.carousel__item:nth-child(6) {
  animation-delay: calc(-4s * 5 / 8);
}

.carousel__item:nth-child(7) {
  animation-delay: calc(-4s * 6 / 8);
}

.carousel__item:nth-child(8) {
  animation-delay: calc(-4s * 7 / 8);
}

<div class="carousel">
  <div class="carousel__item">TEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
  <div class="carousel__item">TEXTTEXTTEXTTEXT</div>
</div>

Answer 5

Answer №3

The equation of an ellipse differs from that of a circle in having different radii for the X and Y axes. It's as simple as that!

var radiusX = 100; // adjust to move items in and out
var radiusY = 60;
var fields = $('.carousel__item'),
    container = $('.carousel'),
    width = container.width(),
    height = container.height();
var angle = 0,
    step = (2 * Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width / 2 + radiusX * Math.cos(angle) - $(this).width() / 2);
    var y = Math.round(height / 2 + radiusY * Math.sin(angle) - $(this).height() / 2);
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

.carousel {
 width: 400px;
 height: 200px;
 margin: 10px auto;
 position: relative;
 border-radius: 50%;
 animation: spin 10s linear infinite;
}
 .carousel:hover {
 animation-play-state: paused;
}
 .carousel:hover .carousel__item {
 animation-play-state: paused;
}
 .carousel__item {
 text-align: center;
 width: 300px;
 position: absolute;
 animation: spin 10s linear infinite reverse;
 font-size: 1.4rem;
}
 @keyframes spin {
 100% {
 transform: rotate(1turn);
}
}
 .carousel__item:hover {
 animation-play-state: paused;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
... (repeated lines)
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
</div>

Answer 6

The equation of an ellipse differs from that of a circle in having different radii for the X and Y axes. It's as simple as that!

var radiusX = 100; // adjust to move items in and out
var radiusY = 60;
var fields = $('.carousel__item'),
    container = $('.carousel'),
    width = container.width(),
    height = container.height();
var angle = 0,
    step = (2 * Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width / 2 + radiusX * Math.cos(angle) - $(this).width() / 2);
    var y = Math.round(height / 2 + radiusY * Math.sin(angle) - $(this).height() / 2);
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

.carousel {
 width: 400px;
 height: 200px;
 margin: 10px auto;
 position: relative;
 border-radius: 50%;
 animation: spin 10s linear infinite;
}
 .carousel:hover {
 animation-play-state: paused;
}
 .carousel:hover .carousel__item {
 animation-play-state: paused;
}
 .carousel__item {
 text-align: center;
 width: 300px;
 position: absolute;
 animation: spin 10s linear infinite reverse;
 font-size: 1.4rem;
}
 @keyframes spin {
 100% {
 transform: rotate(1turn);
}
}
 .carousel__item:hover {
 animation-play-state: paused;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
... (repeated lines)
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
<div class="carousel__item">-</div>
</div>

What are the steps for creating animated text that follows the outline of an oval?

Answer №1

Answer №2

Answer №3

Similar questions

Steps for creating a new tab and refreshing the address bar with a different URL without having to reload the current page

best way to return a function variable in JavaScript

The issue of `window.setTimeout` not functioning properly with Google Maps Marker/XML integration has been a persistent

Showcasing pictures on ReactJS

Limiting the space character in a password field with regular expressions in JavaScript

Leverage the variables' values to access property

Quickly deliver a text file to the user - API Controller C#

Analyzing Date Strings Retrieved From a MySql Database

Alignment of containers on the same level in a horizontal direction

What is the process for inserting an image using nodemailer in Outlook?

HTML Button to Populate Text in Textarea Box

Retrieve the matching values from a JSON object by filtering it with an array, then create a new JSON object containing only

Ways to eliminate line breaks in a specific script

Keep one div attached to the edge of another div to ensure they remain conjoined when resizing

When an iteration occurs within a for loop and a value changes, remember to incorporate a line break or equivalent element using jQuery

How to pass a String Array to a String literal in JavaScript

Prevent lengthy headers from disrupting the flow of the list items

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

Install Chakra UI in the latest Next.js project directory

Employ a CSS3 media query within a Sass @for loop