Skip to content

Animated objects which start off screen remain invisible once moved into view using CSS animations #7921

@lexandera

Description

@lexandera

A common pattern found in ads is animated objects sliding into view over time. While doing this, I repeatedly ran into the issue of some objects not appearing when they should be visible.

It seems that if an object's initial position is outside of the browser's viewport, that object is not loaded. I understand this is most likely intended behavior implemented to optimize content loading but the problem is that once such an "eliminated" image is moved into view using CSS animation this position change is not recognized by amp and the image remains invisible.

This is particularly noticeable on mobile where ad width is often close to window width, so offscreen images get eliminated even when not positioned far away. In landscape orientation it becomes less severe because the viewport is wider. When testing on desktop there appears to be a clear relationship between window size and how far off screen images can be positioned to still get loaded. Ad/container size does not seem to matter.

In all cases images suddenly appear when viewport size changes - on orientation change on mobile, or on window resize on desktop.

Is there a solution possible for this type of problem other than making sure all images are at least partially within the bounds of the viewport, which is not very practical since viewport sizes vary a lot and everyone building animations would need to be aware of this?

Here's an example demonstrating the issue: https://campaigns.celtra.com/a4a/sliding-images.html
The animated strip is around 1500px wide and contains 6 separate images. When loaded in a window which is narrower than this, some of the images do not show up over the blue background.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions