Add fade-in animation on announcement bar

Shopify Discussion
1

Hi, I would like to add a fade-in animation in my announcement bar on the top of my store. I would like to show 2 differents messages in loop. A perfect exemple of this is at https://nude-project.com/

Please help!

2

Hi @danielcorrea ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Add Fade-In Animation On Announcement Bar, let’s try this solution:

Online Store ->Theme ->Edit code
Assets ->Base.css

.carousel-cell.message.message-2 {
    animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

Not working

4

Hi @danielcorrea ,
This is Theodore from PageFly - Shopify Page Builder App.
I’m sorry for replying you late. You can use the following method

Online Store ->Theme ->Edit code->theme.liquid

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly