Jump to content

Applying a css transformation breaks image animations?

Recommended Posts

Site URL: https://collie-chicory-w59b.squarespace.com/

Password: equip

I am attempting to add a rotation to images on my site - 

image.thumb.png.faedc5428afef4a820efb14cd4f3d2cd.png

This works using 

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img {
    transform: rotate(8deg);
}

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img {
    transform: rotate(-8deg);
}

I had to add .animation-loaded to the figure or else the image doesn't show at all (see below).

However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load).

image.thumb.png.a7147ead12e50654ed0b1b2ad8948395.png

I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently.


What can I do to fix this?

Edited by Hailwood
Link to comment
  • Replies 1
  • Views 562
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 9/17/2021 at 10:37 PM, Hailwood said:

Site URL: https://collie-chicory-w59b.squarespace.com/

Password: equip

I am attempting to add a rotation to images on my site - 

image.thumb.png.faedc5428afef4a820efb14cd4f3d2cd.png

This works using 

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img {
    transform: rotate(8deg);
}

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img {
    transform: rotate(-8deg);
}

I had to add .animation-loaded to the figure or else the image doesn't show at all (see below).

However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load).

image.thumb.png.a7147ead12e50654ed0b1b2ad8948395.png

I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently.


What can I do to fix this?

Could you remove the selector .figure.animation-loaded img before we can check for the issue?

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.