Creating a Vertical Top Nav Banner

Hi there! I am relatively new to webflow. I am trying to create a vertical text-ticker marquee. I have a wrapper with text-overflow and a fixed height. I have the inner-containers with the text but I can’t figure out the correct animation to scroll through the 3 containers in a loop on page load. I am sure it is very simple and I’m almost there but I have spent the past 2 hours trying to figure it out without any success :frowning:

Here is the page: https://vertically-rotating-banner.webflow.io/

Here is my public share link

Hi @socks-n-stuff - welcome to the community!

I wouldn’t say this is the best solution to your problem, but I quickly put this together, and hopefully it will get you going! If I have more time tonight, maybe I can try and perfect this if you still need help.

https://www.loom.com/share/6620133d6cf7472c951a9402f967d4ac

Ideally, I think you’d want to move each element individually (instead of all at the same time like I did), and you’d want to move one element completely out of view before showing the next element. It works in my head, but I think this would get rid of that hitch mine has to give you a nice loop.

Thank you for taking the time to do this.

Surely there is a better way to loop through the containers though?

@socks-n-stuff - just made this for you, hopefully it helps :slight_smile:

https://webflow.com/website/looping-ticker?s=looping-ticker

Let me know if this solves your issue!

Thank you. Is anyone able to make anything a little cleaner where it just loops through them?