Solved

Writing animation

HHloot
Excursionist
20 0 4

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 : 

HHloot_0-1704476201638.png

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.

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3380 448 499

This is an 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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 4 (4)

BSS-Commerce
Shopify Expert
3380 448 499

This is an 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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

HHloot
Excursionist
20 0 4

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
Shopify Expert
3380 448 499

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

view - 2024-01-16T104058.677.png

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

HHloot
Excursionist
20 0 4

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 😅.