Text effect on webflow.com/ecommerce

Hey guys,

I was wondering how this text effect has been done on https://webflow.com/ecommerce.

Any idea?

1 Like

The text animation is a right to left transform movement set to loop.

Then the wrapping div is set to overflow hidden.

When you hover over the link, it’s easier to see the wrapping div.

1 Like

Thanks @matthewpmunger! It’s a good start but if I do this, label will just disappear from the wrapping div. Do you see what I mean? Let me know!

Make sure that the text block is set to absolute. Works for me.

Another way I got it to work was using flex on the wrapping div. Then set the flex child (text) to not shrink.

Sounds like that’s not exactly the same effect - On webflow.com/ecommerce the text goes all the way to the left and another text right next to it as well. On and on and on.


See what I mean?

Yes, if you inspect the code on the page there are two text elements side-by-side. I was just doing a proof of concept and not trying to replicate it exactly. The interaction would just need to be slower and add proper animation at the end so the text doesn’t bounce back but instead jumps back or is seamless.

I was just trying to show you how to structure the elements. A scrolling marquee is a fun idea for a callout or notifications on a site. I suggest playing around in Webflow. First you can recreate what they did here, then mess around with your own styling twist on it. For instance the movement could be changed to a vertical scroll.

Makes total sense ) Thank you so much for taking the time @matthewpmunger :pray:

1 Like

Not sure if you ever figured this out but I have a working example I’d love to share for people still trying to get this!

1 Like

love to see an example. I’ve been trying to get a marquee type scroll for days now and nothing quite works as I need it. Thanks for you help in advance.

Sure thing! I can write up a post with some pictures and gifs a little later I don’t quite have the time right now haha.