Jump to content

Delay block appearance after x seconds when page loads

Recommended Posts

Hello, I'm trying to set a time delay for a single block so it appears after a certain amount of time from when the page loads. Specifically, I have text block that has a highlight transition (line running along the bottom). I would like to either delay the whole text appearance, or delay the line highlight animation (whichever is easier). It seems so simple, but I'm having a hard time finding the right code. Thanks!

Edited by elliottholt
Link to comment
  • 2 weeks later...
On 1/2/2024 at 9:09 AM, elliottholt said:

@tuanphan sorry, I never got a notification that you replied. Here's the page (right on the home page): https://www.920adci.com/

Which block are you referring to? I think we can use some JS code to achieve this. However if you need to make this work on Scroll, it will be more complex

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
16 hours ago, tuanphan said:

Which block are you referring to? I think we can use some JS code to achieve this. However if you need to make this work on Scroll, it will be more complex

@tuanphan #block-0c64b2c26c80ede916e7

(The "Simplified" text block). When the page loads, the line transition starts too early as you can probably see. I want this delayed slightly, so it looks better. Sometimes the line starts for a bit, then restarts after the first second. Kinda glitches sometimes, it's weird.. 

Screenshot (270).png

Link to comment
On 1/4/2024 at 9:31 AM, elliottholt said:

@tuanphan #block-0c64b2c26c80ede916e7

(The "Simplified" text block). When the page loads, the line transition starts too early as you can probably see. I want this delayed slightly, so it looks better. Sometimes the line starts for a bit, then restarts after the first second. Kinda glitches sometimes, it's weird.. 

Screenshot (270).png

Add this to Website Tools (under Not Linked) > Custom CSS

div#block-0c64b2c26c80ede916e7 {
  animation: showa 4s backwards;
  opacity: 0;
}

@keyframes showa {
from {
  opacity: 0;
}
  to   { 
  opacity: 1; 
  }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)
9 hours ago, tuanphan said:

Add this to Website Tools (under Not Linked) > Custom CSS

div#block-0c64b2c26c80ede916e7 {
  animation: showa 4s backwards;
  opacity: 0;
}

@keyframes showa {
from {
  opacity: 0;
}
  to   { 
  opacity: 1; 
  }

 

@tuanphan unfortunately, that didn't quite help. That just made the text fade in slightly and then disappear (see screen recording).

Afterwards though, I did modify the 3rd line (opacity: 0) to instead opacity: 1.  This made the text not disappear, however, it still fades and the line running on the bottom is not delayed.. So again, what I am hoping to do is delay the whole appearance of the text block (not fade in). Or delay just the line that runs along the bottom. Basically, the highlight line starts way too early, and it doesn't look professional. Is it possible to make it be delayed? Thanks for your suggestions so far.

Edited by elliottholt
Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.