Webflow No Code Infinite Marquee With Stop On Hover | Attribute Solution

hello my gorgeous friends of webflow I'm Francesco and if you don't know who am I well in this channel we do workflow things and we make them simple and accessible to everybody from time to time by using a whiteboard today we are going to build an infinite Marquee with stop on holder an attribute Only Solution so you won't need to code with the focus on motion accessibility and the entire build and all the instructions that we are going to follow are available inside the cloneable and you will find the link in the description down below and the animation that we are going to build will look exactly like this let's take a look at the wild boar to explain the main concepts of this build so first what is a marquee well a marquee is basically a long stream of texts or images that is shown without the need for scrolling to access the entire content and this usually happens thanks to an infinitely looping animation which is an animation that is executed over and over again to continuously show the content inside the Marquee and now what does it mean that it stops on Hover well exactly that we will see that we can just hover over the Marquee to pause the animation and as soon as we move the cursor out of the Marquee the animation will keep on being executed and now probably the most important important thing what does it mean that our animation is motion accessible well first thing first as Stephanie Carey writes in one of her blog posts what's important is that we ensure that animation creates the best possible experience for all the user snow just a scene once and excessive motion can not only distract user but can also increase page load time and cause accessibility issues so what is motion accessibility motion accessibility is designing and developing motion so that it enhances the experience of some users without impeding the experience of others and in order to achieve motion accessibility we are going to build our animation by using under the hood the CSS media feature prefers reduced motion that is used to detect the user had requested that the system minimized the amount of non-essential motion that it uses and readers with vestibular motion disorders for example may wish to enable this reduce motion feature before viewing an animation but now what is our starting point well as usual we will start by just a div which will be our component basically just our Marquee and to this component we are going to add three attributes the first will be FC Marquee with a value component just to state that this is our component our Marquee then the attribute XC Marquee duration with a value in seconds that just set the duration of one Loop of the animation for our Marquee so again this value is in seconds and then this attribute FC more key Direction which can be either horizontal or vertical because we will see that we can create either a horizontal Marquee or a vertical one and then inside this component we are just going to throw a wrapper in our build this will be a collection list dropper bot it could be just a simple div if you want to use study images for example and to this wrapper we are going to add a single attribute the FC Marquee attribute with a value of wrapper and we will also see that this wrapper is basically just a flex box with the direction set to either horizontal or vertical based on the direction of our Marquee and one important thing to notice is that usually this wrapper which will host the content of our Marquee for example here some images and usually we would need to duplicate this wrapper in order for the animation work properly because we would basically move this wrapper by an amount equal to 100 percent of its width and then the animation would be resetted to the original state to create this sort of loop for the Marquee to work properly but in this case this won't be needed because everything will be automatically handled by the library that I wrote and then that we will just import into our webflow project so yeah that's it easy peasy structure that now we are going to implement inside webflow and there we go let's build this Market together of course you can build it however you want I'm just going to show you how I built the one that is available inside the carnival that comes with this tutorial so inside our main container let's throw a section and let's give it a combo class of background white to set its background to White and then let's throw in a a container this will be our main container and inside it we will throw a div that will be our section content wrapper then inside here we will throw what will be our actual Marquee component inside our component we will throw a collection list so this will be our Marquee um list wrapper and this will be linked to our Marquee items collection and then on to our collection list let's add a class of Marquee list and this will just be a flexbox Direction horizontal and then on to our collection item let's add a class of Marquee of Marquee item and we are just going to set the sizing property to don't shrink nor grow because we don't want these items to shrink based on the size of the viewport and we are also going to set the right margin to to REM and inside our Marquee item we are going to throw at the end this will be our Marquee item content wrapper and this content wrapper will be a flexbox direction vertical and we want this its width to be 23.75 REM and let's set also its position to relative and we are going to use it to at the very end add a link block on top of our collection item that will take us to the corresponding CMS page and then inside our content wrapper we are going to add an image this will be our Marquee item image we are going to take the content from the image field that we have inside our collection and we are going to set the width to 100 percent the bottom margin to 2.5 REM and because we want to make sure that no matter what the image is we want to make sure that it is a square we are going to set the height of the image equal to the width of the content wrapper so let's set the height to 23.75 REM and also its fit property to cover and we are also going to add a shadow to our image so let's add a box Shadow 180 then let's use 25 then 35 and for the color let's just set the alpha value to 15 and then let's throw a text here and this will be our Marquee Marquee item name and then let's grab the value from the name field then let's set the color to this Blackish color we also want to add a one REM bottom margin here and let's pick this Japanese font here and let's set the weight to 700 then we are going to add a dip this will be our Marquee let's call it item additional info wrapper this additional info wrapper will be a flexbox direction horizontal but we are going to align things at the center and then let's go for space between justify space between then inside here we are going to throw a rich text that we are going to use to pull the information from the additional details inside our CMS collection and so this will be our Marquee item additional info and again let's speak this Japanese font here let's go for the blackish color and let's even drop the line height a little bit then inside our additional info wrapper we are going to add an embed I already have the code for the SVG that I want to use it's just a simple arrow and this will be our Marquee item Arrow icon and we are just going to set it's width to 42 pixel and the color to the same blackish or blackish color of the text and so after that we are going to add now a link block on top of our um content here that will take us as I said to the corresponding CMS page so here with the content wrapper selected we are going to add a link block and to do that here let's just write Marquee item link for example this will just be let's first grab here the link from the current Marquee item we just need to set its position to Absolute and then choose full year now the next step is following the instructions that are highlighted inside the column that is available with this tutorial to build the actual animation infinite Marquee animation so as it says here let's just first add the library so let's click on copy script button and back to webflow here let's go to page settings and let's paste it inside the head tag then hit save back to our instructions page we need to tell our library what div block needs to get the infinite Marquee functionality and we are going to add so click here to copy to add this attribute to our monarchy component element so let's add an attribute here let's paste it down and for the value we want it to be component so back to webflow value component now we need to specify what div block needs to be the building block of the Marquee component so basically what div block actually hosts the content of our Marquee and this will be our maculus wrapper the one that will be automatically duplicated by the library under the hood to make than the infinite Marquee animation work and then with this list element selected let's just copy the name of the attribute first then here let's add an attribute let's paste it the name let's paste the name here and then back to our instructions page let's copy the value which is wrapper and let's paste it here now back to our instructions page we just need to tell our Library the duration of our animation and we need to add it as it says here to the component element so let's copy the name of our attribute let's select our component here the element that has the component FC Marquee component attribute and then let's add a new one with a name of Marquee duration and then let's copy the value here by clicking on the button the value is in seconds so 120 seconds here and then we want to specify the direction of our animation we built this list to be horizontally animated and so as it says here we could either use horizontal or vertical but yeah this time we'll go for horizontal so let's first copy the name and we are going to add it again to the component element so with the Marquee component element selected the one with the component attribute on it let's add a new one let's paste it let's paste the name of the attribute and then let's pick the value let's put it here and we just want the horizontal value and that's it now we just need to publish our page so and it's working just fine now actually I don't know how it looks here because I have way too many things open on running on my computer so chances are that it looks a bit glitchy here but you will see that it's just perfectly smooth and we can even hover over one of the items here to stop the animation we move out of the Marquee and it will keep on moving now what are the next steps first we need to fix this horrible horizontal scrolling issue and how can we do that so we it really depends on where we want the content of our Marquee to be cut so let's say that we wanted to cross the entire viewport so we can just select our section here and set its overflow property to Hidden and that's it now we are going to duplicate this section because we want to show that we can have multiple instances of this Marquee inside a page and then we are going to set this Marquee to vertical and we are going to animate it vertically but first let's publish the page and then let's preview the live page and both the animations are running and we can hover over the second one to stop it move out hover over the first one stop the first one and yes it's working just fine we have two instances of our Marquee inside a page but now we want to create a vertically animated Marquee so we can select our Marquee list here and we can add a combo class let's say CC vertical just to not not mess up with the animation above win the Marquee Bob then we can set the direction to Vertical here and then we can select our Marquee item and again combo class you see vertical and instead of having a 2 REM right margin we can have a two REM bottom margin here and then here we have this blank area which we don't really want because now this is part of our Marquee component so if we hover and over this area here we we wouldn't stop the animation and yeah this doesn't really make a sense so we can just select our section content here and then again we can add a combo class and just set its display property to flex here and now yeah the component is restricted to this area and now next step could be to restrict the height of the section so again we can select our section and add a combo class and let's say that we want to hide of 150 BH so now we just need to select our Marquee component here go to element settings and instead of having your horizontal we just need to write vertical now we can publish our website to see that both animations are working just fine so we have the horizontal one hover over we stop it and we also have the vertical one here yeah we can hover over an item stop it and now what is the next step we can just add a very simple hover animation on all the items inside our Marquee and this is how we can build it so we can select our Marquee content wrapper here let's say this one so let's just get rid of this other section just to focus on one Marquee so let's select our content wrapper here we can go to the interaction panel so add a mouse hover interaction here and on over start in animation and we can call it Marquee item on Hover and we wanna um we want to Target our image and we can add for example a move transfer so set initial State the initial state will be 0 REM on the y-axis and then we can for example Target our Arrow icon so again move transform and the initial State could be -2 REM on the x-axis and then we can also Target its opacity so initial say it could be zero percent opacity and then we can simply select all these steps here duplicate them so right click duplicate and now we can use for example out Queen here and we can set the duration to one second and now the uh the image will move to one REM on the y-axis the opacity of the arrow will go to 100 and the move transform will go to zero let's preview this animation seems to be working just fine so let's see this in combination with our Marquee here so let's publish our page let's inspect the live link here then we hover over yep the animation gets played but we need to reverse it so go back here select the content wrapper again interaction interactions panel here and we can simply start an animation we can duplicate the existing one so the on Hover animation then we can rename it let's say on Hover out and we can open the animation and we just need to reverse it so we can delete all of our initial States and then for the image we need to go from one to zero or Arrow opacity from 100 to 0 and I remove from 0 to -2 let's hit save let's publish again and let's inspect the live link to see this all animation working so we hover over we stop the animation we play the hover interaction we move out and everything seems to be working just fine now we have finished we are done just a very very quick note on responsiveness but it's very very easy to set this Hallmark key to be responsive because for example we can go to the tablet breakpoint and we can just select our Marquee content wrapper here and we can simply change the width let's say to 21 then we can select the item image and set its height to 21 as well then we can move to landscape and do the same so for example content wrapper we can set it to the width to 19 select the image set the height to 19 and then again mobile portrait we can just set the height the width of our content wrapper to 17 and then the height of our image to 17 and that's it easy peasy and yeah thanks so much everybody for watching this video and if you liked it well feel free to hit the like button and to subscribe to my channel and if you have any suggestions or want to share thoughts about things that might improve feel absolutely free to throw a comment down below and as usual my weekly recommendation is a wonderful song by a one-time duet super beaver and harukonagaya and the song is called Tokyo as usual you'll find the link in the description down below so see you next time

Channel: Francesco Castronuovo

Views: 6,114

Keywords:

Id: lfWS_E_pOlg

Length: 22min 10sec (1330 seconds)

Published: Thu Feb 23 2023