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

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! 🙂

Dan

Dan,

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.

Best,

Dan

Dan! 

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'?

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

Dan! 

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.

Hi - sorry for the very slow response! would love to try the image block image swap effect, please. 

any suggestions for code to do this? 

On 7/26/2023 at 5:19 AM, dantone1 said:

Hi - sorry for the very slow response! would love to try the image block image swap effect, please. 

any suggestions for code to do this? 

You can add an Image Block first, then we can check easier