Streaming live at 10am (PST)

How to animate background image in a Div Block?


#1

I am trying to make an animation for my portfolio homepage. Please see the attachment.

I plan to make P1 and P2 (both are png. files as two layers of the Div Block’s background images) move from state 1 to state 2, following the directions as two arrows show. But…It seems like
a) it doesn’t allow any layer of background image to move.
b) Even though it can be animated, can P1/P2 move as the direction like the arrow (45 degrees to a certain direction)?

Because of the two problems, I try to make P1/P2 as two separate Div Blocks and put on color. BUT I can not rotate the Div Blocks into 45 degrees as the starting position (like state 1). Also, I am not sure if the problem b) can be solved?

Currently, I change the design as the link on preview. Hope someone can help me. Thanks.


Here is my site Read-Only: https://preview.webflow.com/preview/atsaiwei?preview=31137f90f8c2acc99f750f50994ebabd


#2

I was really hoping someone would have a solution to this. I’d also be curious how to make a background image animate.