Jump to content

Sitewide animation - images to animate one after the other

Recommended Posts



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! 


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.