Text Animation

Store Design
, , ,
1

Hi there! So im using a theme called “FKX V2” and I love the theme overall, but my only issue is, figuring out how to have the “ENTER” button on the landing page to fade in, after the full animation of the video is complete. And haven’t been able to figure this out. And same with when i click on my clothing products link in the “Menu Footer” the items won’t load once it’s clicked. Looking for helo to fix this as fast as possible!

Thank you!

2

Hi @Wickedus ,

Can you send me the site link? I will help you check it

3

https://53a908-ad.myshopify.com/

password: 4444

4

Hi @Wickedus ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

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

.videoBackground .text {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 10s;
}
5

It worked! Wanted to see how I could get the video to play first, then have
the enter button appear at the end. Would you have a way on how to do it?

6

Hi @Wickedus ,

Can I send you a collaborator invitation? it will help me check the animations and give you a solution

7

Yes!

8

Hi @Wickedus ,

You can send me the collaborator request code, I will send you an invitation

9

Yes just waiting on permission access

10

Hi @Wickedus ,

Please send collaborator request code via private message, I will send you an invitation to collaborate

11

I sent one over. Was it seen?

12

Hi @Wickedus ,

Sorry, I didn’t receive it, can you resend it via private message or email?

I will check it.

13

Collaboration Code: 3304

14

Collaboration code: 3304

15

Hi @Wickedus ,

I sent the request, after access, I will check it

16

Just accepted the request!

17

Hi @Wickedus ,

I received it, will check and notify soon

18

Hi @Wickedus ,

Please change code:

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

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

.videoBackground .text {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 10s;
}
19

Thank you! It still fading in slowly, and we wanted to have the fully animation play than have it show at the end of it all

20

Hi @Wickedus ,

I don’t understand, you want it to display faster? or how it will be displayed