Jump to content

Applying a css transformation breaks image animations?

Recommended Posts

Posted

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?

  • Replies 1
  • Views 624
  • Created
  • Last Reply
Posted
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?

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

📑 Squarespace embed PDF popup (affiliate link)

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.