Text Animation

Store Design
, , ,

Topic summary

Goal: make the landing-page “ENTER” button appear only after the video finishes, and fix menu footer product links that don’t load.

Progress so far:

  • Store preview URL and password were shared. Initial CSS was provided to animate .videoBackground .text with a fadeOut over 10s; this worked but didn’t meet the intent (user wants the button to appear after the video completes).
  • Collaboration access was arranged via collaborator code (3304); invitation sent, accepted, and access confirmed.
  • The helper then switched the CSS to a fadeIn (10s) on .videoBackground .text. The user reports it still fades in gradually and wants it to appear only at the end of the full video animation.

Current status:

  • Helper is asking for clarification on the desired behavior (e.g., faster display vs. different timing/trigger). No final solution implemented yet.
  • The separate issue of product links in the menu footer not loading remains unaddressed in the latest updates.

Notes: CSS code snippets are central to the discussion; video-to-button timing is the key unresolved requirement.

Summarized with AI on December 24. AI used: gpt-5.
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