I’m trying to enable a CSS animation on a component called #flexRepeater, only when the document width is greater than the window width. The end result will be a simple autoscroll / marquee effect when content overflows the viewport. This should not be dependent on user interaction, as this is meant for a large display screen.

My function to test whether to enable “autoscroll” is below. The idea is, this will return ‘true’ when the document width is greater than the window width, thus autoscroll should be enabled. This is contained in the html body.

function enableAutoScroll() {
        return $(document).width() > $(window).width();
}

My function to set the animation property is:

function enableAnimation(){
    $('#flexRepeater', window.parent.document).css("animation", "marquee1Col 10s linear infinite");
}

I’m not sure how to set an event listener up such that as the document size changes dynamically, this animation will trigger only when needed (i.e. when the document/window width comparison returns ‘true’).

1. How can I set up my html doc to accomplish this? I feel like I’m close, but I’m very new at this.
2. Is there any way to pass different time periods (15s, 20s, 30s…) into my CSS animation using this method? As the document width increases, I want the time period to increase accordingly so the motion appears consistent to users. Maybe this requires some math using the window/document width ratio.

Any direction would be greatly appreciated.