In today’s video we are going to build an infinite marquee with stop on hover, an attributes-only solution with a focus on motion accessibility. And it also works with Webflow CMS.

We'll talk about marquees, attributes, motion accessibility, CSS media features, and paused animations. And we'll do that by using a whiteboard. 😁

If you liked the video, feel free to hit the like button and subscribe to my channel. And if you have any suggestions about future videos or things I can improve, share a comment below! 😁

*********

UPDATES:

- Added 2 new values for the "direction" attribute: "horizontal-reversed" and "vertical-reversed"
- Added default values for both "direction" and "duration" attributes ("horizontal" and "120", respectively)

*********

Live link to infinite marquee with stop on hover:
https://webflow-friendly-components.w...

Link to Webflow Friendly Components cloneable:
https://webflow.com/made-in-webflow/w...

My Webflow public profile:
https://webflow.com/@francescocastro

Weekly Recommendation: SUPER BEAVER feat. Haruko Nagaya - Tokyo
   • Uru - それを愛と呼ぶなら / THE FIRST TAKE  

*********

We can talk on LinkedIn:
  / francescocastronuovo  

Or we can get to know each other on Twitter:
  / francescoflow  

*********

0:00 Intro
0:40 Infinite marquee with stop on hover at the whiteboard
4:36 Building the structure of the marquee in Webflow
10:45 Adding attributes to build the animation
17:18 Adding a simple animation on hover
20:46 Quick note on responsiveness
21:42 Outro

#webflow #madeinwebflow #nocode #attributes #accessibility