How can I make a text fade in & then fade out, as the first thing you see when loading a website. Like this https://www.naguissatajan.com/

Ask the community
2

Hey @debs ,

So you can Fade In a text - no doubt. But there’s no way to Fade ‘Out’ text after a period of time. However, I wanted to use this exact same effect in one of my sites so I created a workaround. Here’s how you can do it:

First, you’ll need to understand how it works.
So there is the main text, lets call it the Main Title text, that you want to show on the screen for lets say, 2 seconds. Then you want the Main Title text to fade out, but as I said, there’s no such option. So you’ll need something that fades in above the Main Title to give an illusion that the Main Title is fading out . So you can use a container here, lets call it the Overlap Container . You need to place the Overlap Container above the Main Title (you can check in the layers panel) and then place your, lets say, Website Content above the Overlap Container .

Now comes the tricky part: Adding Animations .

…but before that,

Here’s a video to give you an idea of how your site will look like:

Pretty cool, right?

Now coming back to the animations…

Here’s the Duration and Delay of everything in the above video.

Animation Type (for ALL elements): Fade-In

Main Title: PREZTECH

Duration: 1

Delay: 0

Subtitle (optional): PRESIDENTIAL TECHNOLOGIES LIMITED

Duration: 1

Delay: 0.5

Overlap Container: Black

Duration: 1

Delay: 3

Website Content : Logo, Menu, Image, Text, etc…

Duration: 1

Delay: 4 & 4+

Now for some Math…

  • You want your Main Title to appear first, so you can set the delay to 0 or 0.5.

  • You also want your Main Title to stay for one second atleast, so you set the delay of the Overlap Container to Delay & Duration of the Main Title + the number of seconds you want your Main Title to stay before ‘Fading Out’.

  • And finally, you want your site content to be visible, so you can set the delay of your Website content to Delay & Duration of the Main Title + Delay & Duration of the Overlap Container + 0 or 1 second.

And that’s it! You’re good to go!

But remember - you gotta reveal your Website content within 7 seconds only , as that is the maximum animation delay limit.

Here’s a personal tip: Set the background color of the section and the Overlap Container to be the same, in order to make the Fade-in - Fade-Out transition look seamless.

Also, there’s one disadvantage of this method. In order for this to work seamlessly, I’d suggest creating it on a 100vh section with no additional sections on the page. You can place a Welcome / Continue button in place of Website Content , which will take visitors to your homepage.

OR

If you want it to be on the same page, you can use a Layouter as your Website Content and set the scroll direction of the items to vertical, to replicate the sections on a page.

And that’s it. Here’s a link to the website in case you want to check it out yourself: www.prezapd.editorx.io/fade-animation . (NOTE: This site is not yet optimized for tablet and mobile). You can also create a multi Fade-In - Fade Out animation like this:

Hope this helps!

3

Great detailed answer. I was just going to say fade in the name, followed by an opaque container that fades in over it, and then followed by what ever comes in after it.

4

@pratham Oh my god Amazing! Really thank you so so so much for taking the time and really explaining/guiding how to manage this even though technically it’s not possible in editor x. I am going to try it out today and see. So HAPPY!! Been cracking my head on how to do it, as I know my client will love it. :smiley::+1:t3::blush: Thanks Pratham

5

Happy to help! (:

6

@pratham hey thanks again for your help. The website I was working is published now. Here check it out and let me know what you think https://www.airaresidence.com

1 Like