Animation not showing in Chrome

Hi! My second animation is not showing in Chrome (it’s showing in Firefox and Safari). It’s 5 pngs on top of eachother.

https://preview.webflow.com/preview/veryl-festival?utm_medium=preview_link&utm_source=designer&utm_content=veryl-festival&preview=061fb4b60757a0c4f5ba6ee301e3d6ab&pageId=61f66f809432cf3206cab497&workflow=preview

What is the issue?


Here is my public share link: LINK
(how to access public share link)

Hi alinaholtmann,

I do see the slide in from bottom animations on the images, as well as the animation on this element in Chrome

Can you let me know if I’m looking at the right element? Thanks.

Hi Chris! Thank you for your response. I was playing around with it and deleting and reuploading the images. The second shape is next to the last image. Please see the screenshot attached. If you open this link in Chrome https://veryl-festival.webflow.io/ the second shape is not showing up, but if you try Safari it is… It was also showing up on my phone.

I potentially have made the page load animation in a more complicated way than it should be. For the first shape: it’s 5 pngs that are exactly the same laying on top of each other (the shape is same, but the color/reflection is different) and then I made an opacity animation where first shape-1-1 is 100% opacity then shape-1-1 and shape-1-2 etc.

I was planning to do the same with the second shape. If you can recommend a way to do it with fewer steps. Please let me know.

This is a perfectly valid way of doing it. The only thing I could suggest is to just turn it into a GIF instead. Go ahead and build out your second animation and let me know if you continue to have issues.

Ok cool. So I am having issues already, because the second shape is not even showing up in chrome. It’s there in Webflow and then not there in Chrome :))


Initially, I wanted to use gifs but they were ending up too heavy. So these are pngs 200kb each (cant make them much smaller because they start getting pixilated).

ok… it seems to be working now, although I didn’t do anything differently! I’ll try with the third shape now (there is a third one too).

nope… gone again… and I didn’t change anything. aaaaah! going crazy!

I know this sounds like a “obvious” thing to try, but can you just clear your cache in Chrome and see if that solves your issues?

Hi Chris, I’ve tried, no success. I’ve noticed that it’s somehow connected to the Absolute positioning. Now I have the shape divs moved left by 5em, when I set all of them to Auto the shape shows up (I think). What could it be? It’s just so strange because the other two shapes work no problem. And they are all about the same size. I hope I can solve this. Thank you for your help!