Create a fun quick text flip effect

Key Takeaways

hello my friend and friends I recently came across this fun animation in the motion examples and I'll link it down below if you want to check it out and I thought it was really cool and I wanted to see if I could recreate it and so I looked quickly at how they did it and it makes sense how they did it cuz they just basically in each one of their uh list items here they have the text and then they have the text again and they just have an overflow there so it moves on up and then the other text that's underneath moves up into the frame uh and that makes sense and even on the second duplicate text they put an area hidden of true which is exactly what you would want to do like this just so something like a screen reader won't get the text twice and after seeing this I wanted to recreate it but I wanted to know if I could do this without having to duplicate the text twice because if you're using something like react like they're doing here or if you're just using a JavaScript framework in general you can just create a component and have the text as a prop and then you don't have to duplicate the text and it's not a big deal but I like writing vanilla HTML and all of that so I wanted to see if I could do it and I figured out a way if you want to see my final solution jump to this Tim stamp right here it'll also be in a chapter to quickly get to it because I want to bring you on my journey of how I figured it out cuz there's a few things that are really interesting to learn along the way on my failed attempts so if we jump over here to vs code and this is my first attempt which you're going to say Kevin that's perfect it looks great and it does look really good but there's a really big problem with this version of it but really fast uh my HTML for all my attempts stayed the same so you can see I just have a UL here that I set up with a uh quick flip class on each one of the list items I could have done this on the ul2 and just did different selectors and it doesn't even have to be with Lis it could be spans or other things in here so it doesn't have to be with links it would work no matter what uh and then for each one of these I just have the text inside and I did use an area hidden of true on each one of the numbers just because it's already a list it seems redundant to have the numbers there especially when it's a UL which something like this probably would be um so I just felt like hiding the numbers from screen readers and stuff would make sense CU it would just be it's decorative right we're just putting it there for for prettiness so let's see how I did this cuz it is working obviously uh where I actually used animations to do it and if you know about animations you might already know what the problem with this one is but we'll get to that in a second uh but basically I have an overflow of clip so let's actually turn that overflow off and put this uh on right here and let's slow this down so we can actually see what's happening so we'll do two seconds there probably should have used a custom property for my timing but that's okay uh so basically it slides up then it's going to jump down and then move back in and that's the the general idea of how I figured we' be able to do this uh if we were doing it without duplicating the text and so just my forwards means we're moving up and then when it gets to up to 49% and then it instantly jumps all the way back down so it instantly jumps to that bottom part here and then it transitions back to that zero and my backwards is the opposite it just goes down and then instantly goes to the top and then slides back that way and overall I think it actually does work pretty well right now uh not so much but when we have the faster timing on there uh cuz you wouldn't want this that slow timing anyway this might even be a little bit too too slow uh but when we put the clip back on and we turn off the red border that we had there it more or less gives us that feeling of what the effect was before right so I'm pretty happy with how that's working the problem is if I refresh my page when the page loads the animation runs the joy of CSS animations when they're on something uh and having to have them in their default State here so this does not work and you'll also notice this display block I have here this is very important we'll we'll explore why um actually let I'll just turn this off and and let this run and you'll see nothing's actually happening uh I was going to save this for later but we can talk about it now um if this so if it's a span or a link or anything else that you're trying to do this animation on if it's an inline element like spans and links are transforms do not work on inline elements and I always forget this one luckily now that I know it I remember when things aren't working but if you want to translate or do something like that with a transform uh on a inline element it will not work so display block on here just to make sure uh that they're working so that one went out the window so let's come and delete all of this and there we go now uh what we want to do is we obviously need to keep that display block on there CU I am going to use something else but this time this idea came from Taman fif uh so thank you tamman for this one and I think in some situations we could definitely use this one but there is a bit of a drawback to it as well and we'll see what it is there's two deal Breakers in terms of it in this specific situation which is to use a text Shadow and this is kind of interesting let's turn off my uh turn off my overflow actually and I'm just going to put one element here just so it doesn't get confusing with a whole bunch of overlapping stuff so we just have our home that's right there and if you do a teex shadow you could do uh zero uh we'll do -1 LH I think is what we want so actually I had the LH there before if you haven't seen that it's your line height so it matches the line height of your the size of your line height which is really useful for these types of effects uh let's do a zero blur and let's just say red so we can actually see it uh and actually this one should be one LH because I want it to be underneath and then when we do our hover or Focus what we can do is do that translate that we were doing before and to say that it goes up TOA - 1 LH and now when I want a zero 1 LH there we go and you can see it's flipping spots so then I can just say this is a transition let's just say 1 second for now just so we have something on there and then we can see the whole thing slides up and down and then if we turn my overflow clip on and now we go take a look at it it does exactly what we want it to do and it looks pretty good and then you could just come in and switch your red here for the color of your text and my initial thing and this was one of the things that didn't work is I was putting the same as my text color but then the whole thing wasn't working so my my color of the 01 was wasn't matching uh and this was one of my two deal breakers but as I was recording this I thought about what if I used current color and current color will actually give us exactly what we want there so this solution might be ideal and might be what you want to do it's probably the easiest one uh again you do need the display block here CU it won't work without it the one drawback for it is uh when we've done this oh I just realized two drawbacks one of them is when I do it um I can't click on this at all because my link is actually moved off um and this is a link in this case so I'd actually need a span in my link and I'd have to be moving that um I didn't realize that till now but the other thing is my text isn't selectable so if I come and I select it it is selecting the text so my text I guess is selectable but it doesn't look like it's selected until I've moved off now links like this you probably wouldn't be selecting anyway cuz why would you want to copy paste a link to the home like the home text but the it's semi selectable but not really and it's just kind of a little awkward workaround but I think for this type of thing and again if we speed this up a little bit let's go back to like I don't know maybe it's a 35 we'll try 325 seconds instead just to get it a little bit snappier I think that works really well it looks really nice uh so in the right situation again we'd have to modify this a little bit to probably have an extra span on there with the link so we could still click on the text um but you can definitely get this to work and and you might be super happy with this solution so if that's the case then that that's great uh and I think it's a nice very simple simple approach you could take but that selectable text thing was driving me nuts and I hadn't thought of using current color so that was also bothering me but current color solves that problem at least so what was the final solution well made I had to think about it a little bit but my main idea was how can I recreate that idea that we had before with the animation where when it was halfway up I could instantly move it down and have it slide back in and at first I thought I wouldn't be able to do that with a transition cuz you can't put key frames in a transition and there's no way of having different translates wait there is a way of having different translates and this is actually something that I learned from doing a spinny circle thing as a CSS riddle that amachin had given me and I remember it I'm like wait and that's basically the exact thought process ahead I can do two translates on something and that's because translate as you can see here is its own property now and because it's its own property you can do translates and transforms translates and they're two separate things to to show you what I mean there let's come here and do a transform and we're going to say this is my translate this way and we're just going to do a translate on the Y and let's say this one is uh one LH going this way and if I do that it's it's just not going to move right uh let's put our our red border on there again just so we can see it uh and take off our text Shadow because we don't need that anymore uh and it's not moving so let's maybe make this one two just to see now we're doing a translate of1 plus a two which is going to finish in having a one so you can see it's just moving down by one now okay what's the point Kevin okay let's get to it uh we're going to do a transition of my translate here and so now my translate is transitioning but my transform is not transitioning which means it's jumping around cuz this one is instantly jumping and then this one is doing the transition that means I can also do a transform here and let's just make it this like 2 seconds and this is probably going to look really weird or did I break everything TR oh you need a comma separating them there we go uh and now you get this weird thing going on where the two of them are happening independent of one another even though they're both sort of doing the same thing which is kind of weird uh and where the real magic happens here is you want both of these numbers to be the same and I want this one to happen so we're going to move up so let's actually let's turn this one off for a second so I want this to happen where it moves up but then when it's halfway there I want to instantly jump to the bottom and then finish that off so we can do that I'm just going to make this for Simplicity sake we'll make this 1 second and let's turn this one back on and I'm not going to have this one as 2 seconds I'm actually saying it's going to be 0 milliseconds long and. 5c delay and so this isn't really transitioning anymore we're just delaying it from happening because I'm putting the my timing on this is at 0 milliseconds really important here also you cannot do zero here so usually in CSS 0 is 0 is zero if it's a timing function this will just you can see nothing's happening it's broken you need to have an a unit on there so it could be 0 seconds I don't know why I'm putting milliseconds same thing uh so 0 seconds there and now watch this it slides up and then it goes down now there's a bit of a problem uh as you can see right now is when it's all happening if we actually will'll see it much more if I switch these around it slides up actually it doesn't look as bad as I thought uh but it's definitely like when it switches isn't the right time and it's just because of the way the default timing function Works which I think is just an ease so one thing we could do is switch the timing function to be an ease in out or you could come in with something like easing wizard where there's these pre-built uh ones so the main thing is we don't want an in or an out type of one because we want to make sure that the switch is happening cuz right now my switch is happening halfway through the animation so I want to make sure that switch happens when the the actual animation is also 50% of the way through like right now at 50% we're 70% of the way animated on my translate so as long as you're using some sort of uh inout or out in either one of these will work then you should be fine cuz the 50% point is still at the 50% point so we can go in I like the cubic one but you can try different ones here you could probably even get away with maybe I'm not sure if we could do any of these ones or not this wouldn't work I'm thinking a wiggle that lines up in the middle could potentially work as well uh using Wizards awesome I will link it in the description uh but let's go and grab this one that's right here and here I'm just going to come and do a transition timing function and paste in this one that we just got from there and now if we look at it doesn't that look better it's a little bit too slow but it looks really nice and because it's too slow I'm going update the timing but it's kind of annoying to have to update both of these numbers so here on the quick flip because this would be sort of where I'm controlling everything from anyway I'm going to come here and let's say that my quick flip duration and you don't have to name it this I just find locally scoped custom properties I've started doing this a lot more just so you don't accidentally run in if you just called it duration but then you had another element that had a duration and then something's nested in something else you can run into potential conflicts uh so my quick flip duration let's say that this is going to be a 325 seconds to make it nice and snappy then that means here we'd come in and say VAR and bring in my quick flip duration for the T or for the name and then this one I would say that it's a cal of my VAR quick flip duration divided by two because for this to work as long as the delay here is always at the 50% point so we're always dividing by two uh it will be perfect so if we come and take a look now it will be nice and snappy and it looks really good and if I make this really long for some reason it will still it's going to take a while to get started there but you can see it's still working perfectly fine uh and that makes me really happy I also think it's a little bit safer than the animation one that I used originally just because like if you start doing something where you're hovering on and off we'll make this maybe. five for now uh you know when you're if you're halfway through it will like go back it just continues off like where it was which just feels a little bit more natural as well I think the animations that could potentially cause a little bit of Jank uh at the same time so yeah I think that looks pretty good in the end I hope that you enjoyed that learned a few interesting things along the way and I think we recreated the effect pretty well without having to have any duplicate text and having our link that's easily there and everything else so let me know which solution you like the best down in the description or if you learned anything new and with that I'd really like to thank my nabers of awesome Andrew Simon and Tim as well as all my other patrons and channel members for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome