How to animate background image in a Div Block?

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: Webflow - A-Tsai's Portfolio

1 Like

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

1 Like

This would have helped a lot. sigh

1 Like

try to make div inside another div and then all the div in one div container . then use the display block and display none to make animation for before and after .
if you want you can use focus animation to but for transation you have to use slide not ease out or in

if you want i can make you an example here is my instgram @h3nrush