How can I animate text on my online store?

[HHloot]

Hello,

I have a problem with animating  a text of my shopify store. I wanted at first to animate the Title and the small text on my shopify store : 

However i can't manage to get the text animated.

Can someone help me get it animated ? I manged to get the title to fade in down. I would like to get the text to fade in up.

Here is the link for my shopify store : https://blenderpure.com/

Many thanks to anyone who will provide any kind of help.

Best reguards.

[BSS-Commerce · Accepted solution]

Hi @HHloot ,

Insert this CSS code into your CSS file:

.videoBoxInfoTitle {
      animation: fadeOutIn 8s infinite !important;
  }
  .imageBoxInfoDescription p{
      animation: fadeInOut 8s infinite !important;
  }
  @keyframes fadeOutIn {
    0%, 100% {
        opacity: 1; 
    }
    50% {
        opacity: 0;
    }
  }
  @keyframes fadeInOut {
    0%, 100% {
        opacity: 0; 
    }
    50% {
        opacity: 1; 
    }
 }

Video: https://www.loom.com/share/4639522e4ceb403aaf6eae9b6d0da083

Hope it helps you!

[HHloot]

Perfect, It worked! I modified your code a little so that I could get the result I wanted, but thank you so much I couldn't have done it without you. I just have on last thing, but if you can't help me with it, it's all right. As you saw on my store, I've got a preloading page, and we can't see the animations because they are happening during the preloading page. I really don't want to give up on my preloading page because It makes the store look more professional. Now what I want to do is to start the animation just when the preloading page disappears. Do you think that's possible?

[BSS-Commerce]

I found your preload code here => It is possible to do it when the preloading disappears and the animation starts running

I will edit the CSS a bit:

.videoBoxInfoTitle.fadeOutInAnimate {
      animation: fadeOutIn 8s infinite !important;
 }
.imageBoxInfoDescription.fadeInOutAnimate p {
      animation: fadeInOut 8s infinite !important;
 }

 @keyframes fadeOutIn {
    0%, 100% {
        opacity: 1; 
    }
    50% {
        opacity: 0;
    }
 }
  
 @keyframes fadeInOut {
    0%, 100% {
        opacity: 0; 
    }
    50% {
        opacity: 1; 
    }
 }

I will edit the js section with the preload page code:

< script type = "text/javascript" >

    (


        function()

        {


            var preload = document.getElementById("preloader");

            var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

            var loading = 0;

            var id = setInterval(frame, 60);

            function frame()

            {

                if (loading == 70)

                {

                    clearInterval(id);

                } else

                {

                    loading = loading + 1;

                    if (!isMobile)

                    {

                        if (loading == 60)

                        {

                            preload.style.opacity = "0";

                            preload.style.display = "none";

                            document.querySelector('.videoBox .videoBoxInfoTitle').classList.add("fadeOutInAnimate")
                            document.querySelector('.videoBox .imageBoxInfoDescription').classList.add("fadeInOutAnimate")

                        }

                    } else if (isMobile)

                    {

                        if (loading == 70)

                        {

                            preload.style.opacity = "0";

                            preload.style.display = "none";

                            document.querySelector('.videoBox .videoBoxInfoTitle').classList.add("fadeOutInAnimate")
                            document.querySelector('.videoBox .imageBoxInfoDescription').classList.add("fadeInOutAnimate")

                        }

                    }

                }

            }


        })();

<
/script>

When the preload disappears, the animation starts running at the same time

Hope it helps you!

[HHloot]

It's great ! However I would like to make the "videoBoxInfoTitle" to fadeInRight and the imageBoxInfoDescriptio to fadeInUp. I tried to modify it myself but I wasn't able to 😅.