Animating line blocks?

Does anyone know of a way to animate line blocks? I'd like to be able to 'clip' or 'slide' in from the right and left. Thanks.

SS doesn't support this but I just had an idea.

You can add an Image Block > Enable Animation > Then share link to page where you use Image Block, we can try using code to replace Image with Line Block

Hi, this is my logo info:

https://beige-lobster-adm6.squarespace.com/

Password: square207

I added an image block in the very first section on the homepage and enabled animation. Thanks.

Try adding to Design > Custom CSS

div#block-yui_3_17_2_1_1683574932772_19633:after {
    content: "";
    background-color: black;
    height: 1px;
    width: 85vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
body {
    overflow-x: hidden;
}
div#block-yui_3_17_2_1_1683574932772_19633 img {
    display: none;
}

11 hours ago, tuanphan said:

Try adding to Design > Custom CSS

div#block-yui_3_17_2_1_1683574932772_19633:after {
    content: "";
    background-color: black;
    height: 1px;
    width: 85vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
body {
    overflow-x: hidden;
}
div#block-yui_3_17_2_1_1683574932772_19633 img {
    display: none;
}

 

This was a great start. It did change the image to a line as hoped. However, I can't find any css to override the site-wide animations. So site-wide animations are currently set to 'slide' (and I'm happy with that).

As I'm using 7.1, I don't have the ability to set unique animations per image block. I'd like the animation for the 'line' to be a fade in or slide in from the left. Do you think that's possible? Thanks again for the help. 

On 5/11/2023 at 1:43 AM, dross said:

This was a great start. It did change the image to a line as hoped. However, I can't find any css to override the site-wide animations. So site-wide animations are currently set to 'slide' (and I'm happy with that).

As I'm using 7.1, I don't have the ability to set unique animations per image block. I'd like the animation for the 'line' to be a fade in or slide in from the left. Do you think that's possible? Thanks again for the help. 

When you add a section > Choose Classic Editor > Then you can edit animation of each image block

I tried that as you suggested, but no luck. However, I did find some animation code that I applied to the line block and it did work. Unfortunately, it's not the animation I want/need. But it makes me think that if I could find the code for the correct animation, that it would definitely work. This is what I found that animated the line block:

@keyframes Rotate
{from { transform: rotate(0deg) }
 to { transform: rotate(800deg) }  /**change to a higher value for more seamless loop*/
}

#block-yui_3_17_2_1_1658404110543_15861{ 
position: relative;
animation: Rotate 10s linear infinite;  /**change the value to make rotation faster or slower*/
}

Any luck on this? 

Did you manage to sort a solution for this?