Allow Elements To flow off page

Hi guys I hope someone can help.
I am trying to create a scrolling announcement bar. I want the text in this announcement bar to to scroll across as the page is scrolled down. I have the interaction working, however I cannot get the positioning right. As you can see the whole page is re-sized as the the text scrolls across screen.
Does anyone have any ideas for a fix?

LINK TO SITE:

https://preview.webflow.com/preview/edward-gray-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=edward-gray-portfolio&preview=4025994a308b6c99970b13c7fdae9074&mode=preview

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Make a “container” (just a div to contain the element with text) that is width:100%, it should span over the width of the page. Give this container Overflow:hidden.

image

Now place another div inside, and give it a larger width, like 200vw (means 200% of the width of the viewport). And put your text inside of it. Now you can your marquee animation on th 200vw div.

That’ was true, what they said, in marquees are making a comeback in 2020! :smiley:

Thank you so much! Marquees FTW

1 Like