Jump to content

Sitewide animation - images to animate one after the other

Recommended Posts

Hello! 

 

I have a client's website (www.jameshenshaw.co.uk) - and the four logos that load on the third block down on the homepage - he is asking if I can make them slowly load one by one on the scroll. I have added sitewide animation and disabled animation of the blocks above to try to create this effect - however they load altogether and too fast. 

 

Can anyone help me to make these images rise up one by one on the scroll, and slower?

 

Thank you! 

Poppy

Link to comment
  • Replies 9
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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

@media screen and (min-width: 768px) {
.fe-65563c9a9c92a6339e4fd014 .fe-block:not(.fe-block-de011ed580ad1a8d2a6f) .sqs-block-image  img {
    opacity: 0;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
div#block-7a05e8e0494f272025f4 img {
  animation-delay: 0s;
}

div#block-e102033346a698f626d2 img  {
  animation-delay: 2s;
}

div#block-becb520cf9deaebfa9ec img {
  animation-delay: 4s;
}

div#block-b25e3cbc6b414dd18900 img {
  animation-delay: 6s;
}
}

 

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

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.