Jump to content

Add fading load animation transition to code blocks? pls help!

Recommended Posts

Site URL: https://www.dantonedesign.com/

Is there a way to add fading load animation transition to code blocks?

Basically, I want the 'colour swatches' for each project on the home page (https://www.dantonedesign.com/) to load smoothly, in a similar way to the instagram lazy-load-style fade in, visible on this page (https://www.dantonedesign.com/play)

- in other words, i would like the code blocks used for the project 'swatches' to fade in, the same way an image block does if you add a SQSP fade in animation. so the website looks smoother when changing pages. 

Any help would be amazing, thanks in advance! 🙂


Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic


I might suggest that you add the colors as an image and apply the hover image change to that block. That's the easiest option.

If you must keep the code blocks as is, I would suggest using a third-party animation library like "Scroll Reveal" to achieve this. As a bonus, Scroll Reveal could add a little more versatility to your website too.




Link to comment
On 10/1/2022 at 3:44 AM, dantone1 said:


Thanks for the response, and fantastic name. 

sorry im pretty new to the custom coding, please could you explain how i can do/install 'Scroll Reveal'?

It is complex, and you won't do it yourself if you aren't good at code.

I think you should use Image Blocks, then we can give some custom CSS to make image hover effect.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.