How To create Animated Circle Text around an Image

How To
1

Hello,

New to bricks here, also not a coder…

I’m trying to achieved an Animated circle text around an image (did follow a tutorial on YT and was able to achieved it when I did it on VSCode).

Then I tried doing it on bricks using the Code element but seems the script part is not working. CSS works ok but nothing happens when I added the script. I even tried adding the script via the Settings > Page Settings > Custom Code but nothing is happening.

Please tell me if I’m missing something. Or am I putting it in a wrong place?

Here is what’s inside of my code element btw:

Thank You.

<style>
  .circle {
  	position:relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
  }
  .img {
  	position: absolute;
        width: 150px;
        height: 150px;
        background: url('img.webp');
        background-size: cover;
        border-radius: 50%;
  }
  .text {
  	position: absolute;
        color: #ccc;
        width: 100%;
        height: 100%;     
  }

</style>


<div class="circle">
  <div class="img"></div>
  <div class="text">
       <p>Text Here - Text Here - </p>
  </div>
</div>

 <script>
       const text = document.querySelector('.text p');
       text.innerHTML = text.innerText.split("").map(
        (char, i) =>
        `<span style="transform:rotate(${i * 8.9}deg)">${char}</span>`
       ).join("")
 </script>
2

Hi @magpie,

If you are using the “Code element”, one first step could be to check if Code Execution is activated and allowed for your Wordpress role.

image
image942×652 32.6 KB

But I think the issue is more related to your code.
Can you post here the initial VSCode file that supposedly works?

Have a great day,
Thomas

1 Like
3

Thank you for responding.

I have an admin access and I had enabled Code Execution when I followed through the getting started with bricks.

This is on my circleText.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Circle Text Logo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="circle">
        <div class="img"></div>
        <div class="text">
            <p>Your Text Here - Text Here - Text Here - </p>
        </div>
    </div>

    <script>
       const text = document.querySelector('.text p');
       text.innerHTML = text.innerText.split("").map(
        (char, i) =>
        `<span style="transform:rotate(${i * 8.9}deg)">${char}</span>`
       ).join("")
    </script>
    
</body>
</html>

Then here is the style.css:

* {
    margin:0;
    padding: 0;
}
.circle{
    position:  relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /*background: #ccc; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('img.webp');
    background-size: cover;
    border-radius: 50%;
}

.text {
    position: absolute;
    width: 100%;
    height:100%;
}
@keyframes rotateText 
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

.text span {
    position: absolute;
    left:50%;
    font-size: 1.2em;
    transform-origin: 0 100px;
}
4

Hi there,

I run your code with a random image on both html file and Bricks.
I get the same results in both cases:

image

In both execution, the code is not animated. So I guess the problem might come from the code.

Consequently, I can only answer from a Bricks perspective and where codes need to be added:

CSS
Put it in the page you want to execute it : Settings > Page settings > Custom code > Custom CSS. If the code is executed in every page, you might also consider adding it on the style.css of your child theme.

JS
Put it in the page you want to execute it right before closing body tag : Settings > Page settings > Custom code > Body (footer) scripts

HTML
Put your div directly where you want it on your page by using the Code element. Don’t forget to click the option “Execute code” to make it work. The div contains the following:

<div class="circle">
    <div class="img"></div>
    <div class="text">
        <p>Your Text Here - Text Here - Text Here - </p>
    </div>
</div>

Of course, you can also put everything on the Code element but depending on your code size, it could potentially ruin your backend view.

Have a great day,
Thomas

5

Thank you so much, It was now working! I was able to fix the animation issue. Thank you again.