Advanced Transition Interactions in Webflow

[Music] what's up youtube welcome back to the channel for webflow pros in today's video i'm going to show you how to make this transition interaction in webflow so let's get started alright so to start off we have this section i'm going to give it a combo class of is hero and we'll give it a height of 100 viewport height and we'll apply flexbox to center everything inside it then inside of that i'll drag another div and i'll give this one the class of card now it's going to have a height of 100 of its parent and a width of 100 divided by three percent to make it exactly a third the width of the parent inside of that i'll drag another div and this one is actually going to have the class of card underscore media and we're going to give it a position of absolute and don't anchor it to any corners and we'll give it a width of a hundred percent and a height of a hundred percent of its parent just like that which means its parent is going to need position of relative to contain the absolute positioned item we'll also give the card media a z index of one because it's going to kind of rest on the bottom and then we'll drag another div actually this needs to be a link block and we'll give this the class of link and we'll give it a position of relative this time in a z index of two so it rests on top the media and we'll also give it a width of a hundred percent and a height of a hundred percent of its parent and let's give it some top padding maybe 1.5 em on uh both the top and then on the sides we'll give it um some padding of 2 am also go ahead and drag in a heading and i'll make this an h3 and i'll go ahead and replace the text and let me give this the class of link sub for subheading and then i'll go ahead and duplicate this and make this one in h2 and i'll give this one the class of link heading and then i'll go ahead and replace the text let's also align this to the bottom we'll apply flexbox to the parent link and just align it like that and then i'll also go ahead and drag an image and we'll put this inside the card media and we'll give this a class of card photo and we'll go ahead and give it a width of a hundred percent of the parent height of a hundred percent of the parent it'll be a position of absolute to cover and a z index of two and we'll also apply a fit of cover so we don't stretch out the image let's just go ahead and apply an image there and we'll also want a gradient on our link so we can go to the background image and gradient section and just apply a gradient here and i'm going to make this stop right here on black at 70 opacity and i'll also drag it to about about 70 on the timeline and then this part right here i'll drag back somewhere around the 40 mark and i'll bring the opacity all the way down so we have this nice uh bottom gradient right there then we're also going to need one more layer inside the card itself so this will be another div and i'll give this the class of play contain and i'm going to go ahead and give it a bit of padding we'll say 1.2 em on all sides we have this one a position of absolute and a z index of three so that way it rests on top of the actual link which means the entire parent the card needs flexbox and align everything to center so that this play contains sits right in the middle inside that play contain i'll go ahead and drag in another link block and i'm actually going to give this one the class of play and this will be our movable play button its width is going to be 6 am the height will also be 6 am and we'll apply flexbox to center everything inside it then we'll drag a div inside of that and we'll give this one the class of play button this is also going to have a width and height of 6 am it's going to have a background color of our black color here and a radius of 100 viewport width and we'll give it a background image and we'll choose this play button image right there set it to center cover and no tile and there we go also inside our card media i'm going to have a card background video i'll put this inside an embed and i'll give it the class of card video and this is gonna have a position of absolute to cover the entire parent a z index of one so that way it's underneath the photo and a width of a hundred percent and a height of a hundred percent as well um so once we have that we can go ahead and duplicate the card and i'll make two more of them and let me change out the text in the photos so next we'll go ahead and make our play button magnetic so we'll grab our button contain that has the bit of padding we'll create an element trigger on it that's mouse mover over element it will only happen on desktop we'll apply it to the class and then we'll create an animation called uh play move and we're basically going to grab this link block this play here and set a move and we'll move it over a negative 2 em here and then on this part we'll push it over positive 2 em then we'll create another move down here and we'll pull it up negative 2 em and then push it down a negative 2 em right here for this part and then we'll also go ahead and save this and set the smoothing to 80 so it has some nice smoothing there and if we preview that we should see this is anchoring inside of that container so whenever we click on this card we want it to expand out to full width so we're going to add a combo class to this called is open and basically that combo class is just going to set the width to 100 now it's not allowed to go 100 because these other cards are kind of blocking it so we'll also add combo classes to the other cards called is closed that's going to set their width to zero percent like that that's going to allow this one to eventually span full width we're also going to want to add transitions and we'll apply it to all properties in this case and set it to 600 milliseconds so that way when we add on the class it sort of gradually spans out over that course of time we're also going to go ahead and set the card itself to overflow hidden and then to make sure that the text inside doesn't wrap when the width decreases we'll go ahead and under more type options set the breaking to no wrap i'll add that combo class of is closed onto this card as well and then add the combo class of is open one to this one and this is how it looks when it's all spanned out like that we're also going to add a combo class of is open to this heading here and what we're going to want to do is just increase the font size so on the base class we'll apply a transition and we'll apply it to all properties and set it to 600 milliseconds and then when we add the class of is open we're basically just going to want to increase the font size to 14 am so it slides up i'm also using a variable font here to sort of increase the boldness and italicize the font a little bit like that if you'd like to learn more about variable fonts feel free to check out my tutorial on patreon we'll also animate this subheading here so i'll apply a same transition here to all properties of 600 milliseconds and then i'll apply an is open combo class to this one and here we're going to increase the font size to 2.4 and we'll also go ahead and apply a transform that's going to move it over 0.8 so it just pushes it over a little bit like that i'm also going to apply a transition to our play button itself and i'll apply it to all properties over 200 milliseconds and then we're going to start it off with an opacity of zero and whenever we add a combo class of is open we're going to bring the opacity up we'll even go ahead and start the base class off at a font size right here of 0.5 em to scale it down by half and then whenever we have the open class on we'll scale it up to 1 em font size like that so it slides up and then when the open state whenever we're hovering over that one we're going to go ahead and apply a transform of scale to this one and it's actually going to scale it down to 0.9 just like that so that way when we hover over we get a nice little scale effect just like this now whenever we click on this button we're going to add another combo class called is playing and we're basically going to use that to switch out the background image here and we'll also go ahead and set the default state on this down to 0.5 em so it cuts it in half and the opacity will be zero percent on this and then we'll only show this state whenever we're hovering over it we'll bring the opacity up bring the font size up to one and then we'll also go ahead and set the scale on the hover state to one for this one so that whenever we're in this is playing state we don't really see the pause button unless we're hovering over it but when we remove this class we see the play button by default now whenever we click on this play button instead of doing a pop-up modal to play the video we're going to scale this background image down and reveal the video underneath some of the best interactions really just guide the user to where their eyes should look next and they serve more as a transition and less is an interruption to the experience so to do that we're going to want to animate this card media container i'm going to apply a transition uh on this one to all properties and set it to 800 and then what we're going to do is basically just add a combo class of is playing onto this one and that's gonna set the width on it to 90 just like that now instead of forcing a height on this we're going to want to detect the height based on the aspect ratio of our video that we plan to use so in this case i'm not going to set a height i'm going to set a minimum height of a hundred percent and then i'll also add some top padding of 38 percent and this top padding basically is just going to hold that spot of where that video should be since our media side is all positioned absolute and whenever we add this combo class of his playing we're going to set the minimum height to zero percent and then it's only going to have the height of our padding right there so that way when we remove this class we see it taking up full 100 height and width and then when we add the class it's 90 width and then whatever the height of the video is we're also going to want to get this text out of the way whenever we're playing the video so we'll add a combo class of is playing onto the link and that's just going to basically turn the opacity down on that and so we have a nice smooth transition we'll add a transition to opacity so it just sort of fades out the way like that and that's basically how it's going to look we also want to hide this card photo so that way we're seeing the video underneath we could add another combo class of is playing onto the photo that turns its opacity down but since we're not going to need to change the state on mobile it'll always look like that in that state i think we're going to use a little custom css instead so we'll just grab this combo class of is playing and we're going to grab the card photo and say whenever that card photo is inside of a class of is playing so we'll just basically target it like this uh we're gonna want to turn the opacity down uh on the photo so opacity will be zero on that photo only what's when it's inside of the combo class of is playing so now we're seeing the video underneath and we can even apply a transition to opacity on the photo so that way when we add and remove this combo class the photo sorted just fades out and we see the video instead underneath just like that and that's looking good so i'm gonna go ahead and just remove uh this class of is playing from the link for now we'll also make sure the play button itself doesn't have the is open combo class and then on the card itself we're gonna remove the is open class from this and remove the is closed class from these cards just to return everything back to the default state and i'll remove this is open from the heading and remove is open from the subheading lastly if we try and click in the center of this link block right now to open the modal we're actually just clicking on the play contain so we want to make this play contain not clickable by default so we'll just open up our embed and we'll paste in that class name and we want to set it to pointer events none and then if we save that now we can't click on that play container at all but whenever we add the combo class of is open to that contain we want to be able to click on it so we can play the video so we're basically just going to say the play contain with the combo class of is open will be set to pointer events auto so that way we can click on it again so now we can set up our jquery to add in all our classes so this is going to happen whenever we click on one of these link blocks so we'll go ahead and copy the class of our link head over to our jquery builder and our trigger is going to be on click of the class of link the first thing we want to do is get our trigger element or the link we clicked on and then we want to add a combo class of is open to the card but not to every card on our page just the one that's the parent of the link we clicked on so we'll copy that class of card and we'll say get a parent with the class of card and then we want to just toggle a class so toggle a class means the first time we click it's going to add that class the second time we click it will remove that class from the parent card and the class we want to toggle is the one we created in webflow called is open that is just going to set its width to 100 width then we'll also want to create a new step for all of our sibling cards so we're going to get the trigger element or the link block we clicked on again we'll get the parent with a classic card and then once we have that parent card we're going to get all the siblings or the other cards that are next to it and then once we have those siblings we want to toggle a class on them called is closed the one we created in webflow to set their width to zero percent then we can create one more step and this is going to be for all the children inside our card so we'll get our trigger element again we'll find the parent which is our card then we want to find a couple children that we want to toggle a class called is open as well that will animate them in different ways so first of all the play contain which is the entire play button container then if we want to add multiple classes into this we can do a comma space period and type multiple class names so another one we want to toggle is the play button which is going to bring it to an opacity of 100 we also want to toggle the link sub the subheading which is going to increase the font size and toggle a class on the link heading as well the main one that'll increase the font size on that so let's just copy all this code and let's check it out we'll head over to our project our page settings and the closing body tag section we'll paste our code inside script tags then we can save and publish so now if we click on any card it scales up the font size of the subheading and main heading set this card to 100 width reveals the play button inside and when we click again it removes all those classes to turn it back to its old state you'll see it's also taking the sip links and setting those to zero percent width since it's toggling those classes on and off and this is working perfectly we can click on the play button and it's going to start playing our video in the background but we still need to reveal that video and do everything for that so let's go ahead and set that part up as well this is going to happen whenever we click on this play link block here so we'll copy that class and our jquery builder will say one click of the play button we want to get the play button we clicked on and then get the parent which is the entire card and then inside of that card we want to find a couple children first is the card media second is the actual link block itself and then the third is the play button and on all of those elements we simply just want to toggle a class of his playing and that is playing class we'll do different things for each of these so for the card media whoops had an extra period for the card media it's basically just going to scale down the width and make it the height of our video for the link it's going to turn the opacity down to get the text and the headings out the way and for the play button it's going to change it to the paused state that we created in webflow so let's copy all this head over to our project and we'll paste this in down here and let's save that and check it out so now we can click on this when we click play it scales it down sure enough gets the heading out the way and shows the pause button here when we click this pause button again it toggles that class back off so we have this where we can toggle it on and off the only thing we need to account for is what if the video is playing and we click off somewhere else to close out the modal we need to switch this video back to the full screen picture with the text so we can do that in our project if we just open up our custom code this line right here is the one that's basically just switching everything back and forth from that playing state we can just copy that and run that inside our click of the link block but we don't want to toggle a class because that will add the play button on make it start playing the first time we open the modal we just want to remove the class every time we click on this link so no matter if it's open or closed it's always just going to remove that class of is playing and get the play button ready for us to engage with so let's uh save this and check that out so now on our live site we can click on any of these play the video and when we click off to the side it closes out the modal returns everything back to how it should be when we're playing the video it's playing with audio on loop in the background if you'd like to learn how to play background videos with audio on click hover or scroll onto vue check out my tutorial for it on patreon the last thing we need to do is just make this fully responsive so on tablet everything's just kind of working just like it was on desktop that's great on this break point we're probably going to need to stack our cards so we'll grab the entire section right here and switch the flexbox direction to where they're all stacking one on top the other then the cards will take up a hundred percent width of the parent and for the height it'll actually be a hundred divided by three so they're each a third and whenever we add that is open combo class we're going to want to actually change the height this time to a hundred percent so it takes up the full height and whenever we add the is closed combo class we're okay with the width being a hundred percent now but we want the height to be zero percent to collapse it just like that and um let's add that is closed combo class while we're at it to this card so we can see how this is going to look and let's go ahead and add the is open to the center card as well right here um or actually i may switch these i'll add is closed to this one and i'll add the as open combo class to this one here and then let's see what this looks like with this is open class so the text is getting a bit large i may back down the font size just slightly on this and then let's see what the play button looks like with that combo class of his open on that so the play button is still scaling up and down in size and i think i want to just switch the play button to fix size on this breakpoint so maybe something like 14 pixels and that way when we scale down here it's still a fixed size for the play button but this text i may actually back down the font size again even just slightly i think this is my longest one so this is how it looks and when we add that class it scales up to about that size the link sub is a bit too small here i'd probably increase the font size a bit and whenever we add the class of is open i want to increase the font size even more and then i want to make sure that this margin or this move distance right here is lining up and then that's looking good there so i can remove this class of is open from both the text blocks i can remove the class of is open oh and also let's check the um card media when we add that class of is playing it scales down to the right aspect ratio which is perfect and that's looking great so i'll go ahead and remove the class if it's open from this one and let me remove the class of is closed from the other two and quickly remove the class uh from these link headings looks like i did all right and the play button that's one other thing i need to remove right here we'll remove that class of is open and then we should be good to go so let's go ahead and publish and check this out so if we check this out in sort of a mobile view we can click on this card it sort of expands like that to fill the full height we can click play on the video and it scales down click pause to scale it up and uh that's all looking great this is scaling and working uh for all of these different sections if you've enjoyed this tutorial please consider subscribing to the channel so you never miss another video also if you'd like feel free to check out the cloneable for this project in the description below i'll catch you in the next video

Channel: Timothy Ricks

Views: 5,793

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, transitions, jquery

Id: V7yrAVGsm94

Length: 20min 17sec (1217 seconds)

Published: Wed Sep 08 2021