I noticed the reason why spinner-2 was behaving bad was because you had the same properties for the CSS before and after pseudo-elements so when you applied the "bounce" animation in the &:before element on the same spinner-2 class and also the same "bounce" animation on the "&:before, &:after" the browser prioritized the animation properties defined inside the "&:before, &:after" for ".spinner-2" and the same animation was applied to both the "before" and "after" elements for ".spinner-2". I sorted out those two mad balls by separating the "&:before, &:after" elements applying all the properties found in the original chained "&:before, &:after" up until the "margin-left" property, these were inserted on top of the original single "&:after" properties. Then I applied the animations for the before and after individually, naming them differently and tweaking so the balls dont cross the bigger circles boundaries. Here is the fixed version, I forked it but made it clear Travis from Dev-Tips made the original: codepen.io/Flashpeed/pen/qNLBXV?editors=1100
Challenge accepted! codepen.io/pentopaper/pen/vKvVEL 1) Changed the openings in the ::before and ::after elements so there wouldn't be a gap in the back 2) Adjusted chomp to have a difference of 50° each, for some reason 45° seemed to leave a tiny gap between the "jaw" when it closed 3) Added a .cover to cover the dots Kurt has already eaten & reload them after each pass. 4) The animation pauses a bit after it makes each pass. 5) [EDIT] Also, forgot to mention that I solved the problem with it flipping by assigning Kurt a set width (height couldn't hurt either).
I simply don't get how is it that this channel doesn't have like millions/billions of followers.. just check the like-dislike ratio, it's insane! Thanks for the content. I'm so glad I found your channel; 5 years later this is still so useful and relevant.
Thanks for these tips dude. They're really 'useful' is probably the best compliment I can give. Saying they're 'entertaining', 'engaging' or 'informative' (which they are) doesn't quite communicate the value they inherently offer. Than you.
Wow! I really appreciate your tutorials. I can safely say that you've opened up CSS for me! I used to fear and loathe it, but now it's something I enjoy doing. In fact, codepen has become a hobby for me. Thank you!
Dude, turkey radar made me laugh so much :)! Because of that funny moments it's much easier to learn and remember things. I'm glad to learn from your videos, your job is cool - HIGH five :)!
0 to 0% working as start and endpoints is very normal. Think of it this way, when you add 1 to 360 in most editors, it will become 1. In this way it actually reads 0 as the same as 360 in a lot of cases. If you have a start and endpoint that are both 0 or 360 or in this case 0 or 0, the animation will work the same as if you set 0 and 100. I don't know if I explained this clearly, but that's my mileage on this topic. I've had this happen a lot when working with rotations.
@33:21didn't you say earlier you can't give inline elements dimensions? Thanks for all the content dude, I'm teaching myself HTML and CSS and your videos are excellent!
You could've gone with rotate(45deg) and it would've been perfect, cause each individual border with color transparent is cutting off 1/4 of the circle, and since you're moving the bottom and the top part by half of the angle of that, 45deg is the answer, and you're gonna get much nicer animation. Anyway it was really exciting watching this, I could've never come up with something like that :D
omg, the second spinner just made my day :D luv ya, Travis, you're motivating and super cool, and all the stuff you show is very useful and amazing ;) greetings from Russia!
It would have been easier to have do the pacman chomp like this: - have the bottom segment with a border-bottom-left & border-bottom-right. Likewise a top segment which would be border-top-right & border-top-left. That would then be two halves of a semi-circle - then you animate them from 45 degrees to 0 and probably -45 to 0
You're fun...ny! Enjoyed your tutorial. Conceivably I should be able to make a loader/spinny thing that looks like a glass of water filling up (can this be a gif?) and code it with css into my html? Or do I need to use something else? I'm struggling with this at the moment...this can be done right?
May i ask what the &:after, and &:before serves in a normal webpage? i have taken up web development and i have never come into a case where i need to use it, or at least that i have realized.
tutorial was awesome can you provide the all property of animation and @keyframes? or another link of web that tells me properly how many types of animations and @keyframes property thanks.
Hello Travis, your video is just awesome. I just wanted to know what are the software and tools that you use to make the videos. Thankyou !! you are cool man...
Travis, you are the man! However, in this particular video, I wasn't catching on? You were doing more showing than explaining what each css property would ultimately do,thus I had to guess what animation meant or how would it perform? Or "before" or "after" meant? And so on?
hey Travis! have you seen the google Olympics web app ? obviously you knw how to create this fancy stuff (animations, behavior of pages when we move to another page ).. could you please tell us how to make it..??
Hey Dev, I have a query that you use different software for coding but I use notepad ++ and dreamweaver for coding and the code you use sometimes does not work on both the above mentioned software can you help me to how to make drop-down navigation bar with different effects you had showed in your video.
What is your setup? It's just I love the size of the text or the font on your screen, it's almost like your font sizing is the same as mine but your screen is like twice the size - hopefully that makes sense.... But, what's the setup you run when you make videos (or this video)? Cheers! NOTE: I know you use Mac, but what kind of Mac... iMac? MacBook? Blah blah....
Thanks for the videos, they are entertaining and I've learned a bunch. I like that you don't always plan everything out, so we can see the thought process as well.
Awesome Video!! What text app is he using that he doesn't have to add "{}" and ";"? tThe keyframe transform rotate should have been done in 45 degree increments. It would have been perfect!Still awesome video. You Rock Bro!!!
This video was fascinating enough to motivate me to do 63% of codecademy's HTML & CSS course in one day xD and I'm still going. Awesome vid. And this is coming from a guy who's main focus should be python
Another challenge: make the dots behind disappear. I would say that behind the pacman there is a bar with the background color that blocks everything behind it.
Hey Travis, I have an off topic question regarding css. Do you think w3.org css 2.1 specification is a good place to read about some of the css features? Like I'm now learning more advance css concept like box formatting context and I can't find any courses or video tutorials on topics like this except for w3c. Is it legit? Coz it says the spec was written back in 2007 but updated few months ago. Thanks! :)
I love your videos, and your personality. I would definitely be your friends in real life if you weren't weirded out by that comment lol. keep up the awesome work.
Hey great video Travis! But I'd like to see a video on how to make an image preloading animation that disappears when the image is loaded. Could you do that? Or just tell me real quick how it's done :)
That's all done in JS. So the way it works is you place the animation and then tell JS to load new content in when it's ready. It rill replace the spinner.
I noticed the reason why spinner-2 was behaving bad was because you had the same properties for the CSS before and after pseudo-elements so when you applied the "bounce" animation in the &:before element on the same spinner-2 class and also the same "bounce" animation on the "&:before, &:after" the browser prioritized the animation properties defined inside the "&:before, &:after" for ".spinner-2" and the same animation was applied to both the "before" and "after" elements for ".spinner-2".
I sorted out those two mad balls by separating the "&:before, &:after" elements applying all the properties found in the original chained "&:before, &:after" up until the "margin-left" property, these were inserted on top of the original single "&:after" properties.
Then I applied the animations for the before and after individually, naming them differently and tweaking so the balls dont cross the bigger circles boundaries.
Here is the fixed version, I forked it but made it clear Travis from Dev-Tips made the original: codepen.io/Flashpeed/pen/qNLBXV?editors=1100
Thanks for doing this. That makes a lot of sense. Upvote!
Challenge accepted! codepen.io/pentopaper/pen/vKvVEL
1) Changed the openings in the ::before and ::after elements so there wouldn't be a gap in the back
2) Adjusted chomp to have a difference of 50° each, for some reason 45° seemed to leave a tiny gap between the "jaw" when it closed
3) Added a .cover to cover the dots Kurt has already eaten & reload them after each pass.
4) The animation pauses a bit after it makes each pass.
5) [EDIT] Also, forgot to mention that I solved the problem with it flipping by assigning Kurt a set width (height couldn't hurt either).
Travis, the guy getting a backend developer interrested in design :)
They said it couldn't be done ;)
Wow that turkey radar thing got me :'). Awesome to see you having fun with this. Thanks for the videos, great as always.
I simply don't get how is it that this channel doesn't have like millions/billions of followers.. just check the like-dislike ratio, it's insane! Thanks for the content. I'm so glad I found your channel; 5 years later this is still so useful and relevant.
Thanks for these tips dude. They're really 'useful' is probably the best compliment I can give. Saying they're 'entertaining', 'engaging' or 'informative' (which they are) doesn't quite communicate the value they inherently offer. Than you.
I appreciate your encouragement my friend. Thanks for watching :)
Wow! I really appreciate your tutorials. I can safely say that you've opened up CSS for me! I used to fear and loathe it, but now it's something I enjoy doing. In fact, codepen has become a hobby for me. Thank you!
lmao i love this series. you're so entertaining. i watch these in my free time haha
One thing I do like particularly is the way you are having fun doing this thing! Awesome! Keep it up!!
These videos are awesome. I am really enjoying the lessons and the fact that you don't take them too seriously.
Awesome video, i never realized making such cool animations could be this simple. Thanks 😊
never thought i would have so much fun with CSS in my life ... what a time to be alive :) , thanls for the video :D
Dude, you had me cracking up this morning, especially with the turkey radar. Awesome way to start my day!
Glad you had fun Marco, thanks for watching :)
Dat boing doe
BOING!
You made me laugh and learn. Thanks Travis :)
Perfect combo!
The atmosphere in this video is just a mood-raiser! I laughed loudly along, even my husband asked me what is so funny that I'm watching :D
Can you tell my why css in this video look so... weird?
+thronecode Because Travis is using Jade ;)
+thronecode and SASS, but you should really watch more videos on his channel, there you will find all the answers ;)
TheMalni Oh! Thank you so much Malni! Gonna add it to my list of things to learn :)
Dude, turkey radar made me laugh so much :)! Because of that funny moments it's much easier to learn and remember things. I'm glad to learn from your videos, your job is cool - HIGH five :)!
0 to 0% working as start and endpoints is very normal. Think of it this way, when you add 1 to 360 in most editors, it will become 1. In this way it actually reads 0 as the same as 360 in a lot of cases. If you have a start and endpoint that are both 0 or 360 or in this case 0 or 0, the animation will work the same as if you set 0 and 100.
I don't know if I explained this clearly, but that's my mileage on this topic. I've had this happen a lot when working with rotations.
Damn, I haven't been so much entertained, during a learning session, since never. Great job.
I really enjoy every video you do. You make learning complicated stuff much easier!
Thank you travis! and it's so refreshing to see pug and sass as it should be written
haha, Love me some pre-processed code :)
lol, the timer going off made this much more enjoyable to watch
haha, yea, that was a fun little thing. Stressful tho. It's like waiting to get slapped in the face. lol
You should have Los slap you when your time is up (reminiscent of the CSS Basics series).
hctaw ot elbayojne erom hcum siht edam ffo gniog remit eht, lol
6:07 Its because if you rotate 360 deg you end up in the same point, that's why its not "animating"
I can watch these videos all day. I feel like we are working on this together.
That's great to hear :P
at 5:30 use transition-direction: alternate to easily make it go forwards and backwards repeatedly
DUDE YOU'RE SO COOL WITH THIS STUFF... THANKS FOR SHOWING US
thanks alot man your videos are awesome can't believe someone is sharing these kind of basics on youtube hatts off
@33:21didn't you say earlier you can't give inline elements dimensions?
Thanks for all the content dude, I'm teaching myself HTML and CSS and your videos are excellent!
You are fun to watch! Learned a lot and can't wait to use them on my nexr project. Nice vid!
I had no idea that css was this powerful dang this is awesome!
u are so happy. I love it
Damnn this sound!!
haha
gays are happy people!
yoooo, I love this channel. That boing timer was funny
First video of yours I watched, I loved it, and immediately subscribed. Keep doing your thing, its awesome :)
There is a fine line between genius and insanity!
This is called real passion. Loving n enjoying what you do and you're damn good at it. Thanks for the videos dude. Love em n you.
Thanks Hemant, I appreciate the love :)
4:25 - JUMP SCAPE OF THE YEAR
another amazing video from trav! you are always awesome!
I like how you said "This is raw, uncut" and then immediately there was a cut. ;)
HAHAHA. "Raw, uncu-."
You could've gone with rotate(45deg) and it would've been perfect, cause each individual border with color transparent is cutting off 1/4 of the circle, and since you're moving the bottom and the top part by half of the angle of that, 45deg is the answer, and you're gonna get much nicer animation.
Anyway it was really exciting watching this, I could've never come up with something like that :D
Good point, thanks Darko :)
Thanks for the sudden scary sound at 4:41 LOL
hahha, boo!
Lol 14:4 ta dnous yracs neddus eht rof sknaht
Can't thank you enough for this absolutely invaluable resource :)
You are absolutely welcome :)
I am a simple man. I see Travis i press like:)
Greetings from Russia)
Hahha, that's a good formula.
The boing! And the rapid lower lip chomp had me rolling.
HAHAHa, Killed me :D
HAHAHa, Killed me :D
Great video. I'm watching at work so it was extremely hard not to laugh. Thanks for the insights
omg, the second spinner just made my day :D
luv ya, Travis, you're motivating and super cool, and all the stuff you show is very useful and amazing ;)
greetings from Russia!
It would have been easier to have do the pacman chomp like this:
- have the bottom segment with a border-bottom-left & border-bottom-right. Likewise a top segment which would be border-top-right & border-top-left. That would then be two halves of a semi-circle
- then you animate them from 45 degrees to 0 and probably -45 to 0
Travis you're awesome!
You're THE Master of CSS my friend.. WOW !
Thanks Carlos!
I really need to read the docs of transform-origin. Every time you are using this property my mind simply explodes :D
Its like this: from where do we start this transformation? By default it's center center
DevTips Yea, it's pretty much like an Anchor Point in After Effects, but it still confuses me every time :D
+DevTips it's like an ancher point in photoshop, right? I mean the little thing in the center of each element when you press ctl + t
@42:40 make both the chomps
@keyframes chomp
0%, 100%
transform: rotate(43deg)
50%
transform: rotate(-43deg)
but delay one 0.5s w.r.t the other!
Nice!
That timer made me jump from my seat, hahaha.
Me too!!
the reason is the fact that the transform property overrides so when you just set scale on the 50% the rotate gets lost
yep, specificity FTW!
That surprised look with "Boing!" and to make it worse, the snort. :D
hahah!
LOL, keep the timers! It's a Keyframe on it's own!
great effort and awesome animations
thanks Travis :))
Thanks men'm!
You spin me right 'round, baby, right 'round
Like a record, baby, right 'round, 'round, 'round
You're fun...ny! Enjoyed your tutorial. Conceivably I should be able to make a loader/spinny thing that looks like a glass of water filling up (can this be a gif?) and code it with css into my html? Or do I need to use something else? I'm struggling with this at the moment...this can be done right?
23:34 JUMPSCARE, AHAHHAHAHA. Nice ringtone
May i ask what the &:after, and &:before serves in a normal webpage? i have taken up web development and i have never come into a case where i need to use it, or at least that i have realized.
tutorial was awesome can you provide the all property of animation and @keyframes? or another link of web that tells me properly how many types of animations and @keyframes property thanks.
21:33 I WANT WHATEVER THE HECK HE'S BEEN SMOKING!!!!
Awesome. Thanks. I fixed the code to work perfectly. Really enjoyed the tutorial.
.track{
width: 300px;
height: 0px;
border-top: 8px dotted #eee;
display: inline-block;
}
.kurt{
animation: moveChomp 5s linear infinite;
width: 0px;
height: 0px;
position: relative;
top: -15px;
left: -15px;
}
.loader{
background: none;
display: inline-block;
position: relative;
}
.loader:before, .loader:after{
content: '';
display: block;
height: 0px;
width: 0px;
border: 30px solid orangered;
border-radius: 50%;
border-right-color: transparent;
position: absolute;
border-bottom-color: transparent;
top: 50%;
margin-top: -34px;
animation: topchomp 1s ease-in-out infinite reverse;
}
.loader:after{
// left: 80px;
border-color: orangered;
border-top-color: transparent;
border-right-color: transparent;
animation: bottomchomp 1s ease-in-out infinite;
}
@keyframes bottomchomp{
0%, 100%{
transform: rotate(10deg);}
50%{
transform: rotate(-50deg);}
}
@keyframes topchomp{
0%, 100%{
transform: rotate(-20deg);}
50%{
transform: rotate(37deg);}
}
@keyframes moveChomp{
0%,100%{
left: 0%;}
50%{
left: 100%;}
0%{
transform: rotateY(90deg);}
3%, 47.5%{
transform: rotateY(0deg);}
52.5%, 98%{
transform: rotateY(180deg);}
100%{
transform: rotateY(90deg);}
}
Hello Travis, your video is just awesome. I just wanted to know what are the software and tools that you use to make the videos. Thankyou !! you are cool man...
Cool Dev!!! do you have a book on these cool css animations?
Travis, you are the man!
However, in this particular video, I wasn't catching on? You were doing more showing than explaining what each css property would ultimately do,thus I had to guess what animation meant or how would it perform? Or "before" or "after" meant? And so on?
I am 10 and to be honest, my favourite channel is yours Travis.
working on the bouncy animation and then he's startled by the bounce alarm
His antics are hilarious 😂
Haha loved the BOINK jumpscare!
hahha, I bet you did. haha.
hey Travis!
have you seen the google Olympics web app ?
obviously you knw how to create this fancy stuff (animations, behavior of pages when we move to another page ).. could you please tell us how to make it..??
sir, how to use gradient in border color? i lose the border-radius when i try to do this.
Hey Dev, I have a query that you use different software for coding but I use notepad ++ and dreamweaver for coding and the code you use sometimes does not work on both the above mentioned software can you help me to how to make drop-down navigation bar with different effects you had showed in your video.
Hola Travis, te sigo desde hace rato y he aprendido mucho de ti. Supongo que el código se entiende en todos los idiomas, Gracias.
What is your setup? It's just I love the size of the text or the font on your screen, it's almost like your font sizing is the same as mine but your screen is like twice the size - hopefully that makes sense.... But, what's the setup you run when you make videos (or this video)? Cheers!
NOTE: I know you use Mac, but what kind of Mac... iMac? MacBook? Blah blah....
Hey Travis,
Awesome video .. as expected! ;)
thankyou for your existence:)
Totally yay'd and yo'd, laughing the whole time. Insanity is infectious.
Hahah, thanks Jonathan :)
Thanks for the videos, they are entertaining and I've learned a bunch. I like that you don't always plan everything out, so we can see the thought process as well.
Shouldn't you be using the ::psuedo syntax instead of the single colon?
Loved the video, Travis. I had a QQ. How did you avoid having to declare a content property for the :before and :afters of the spinner-# elements?
which IDE or text editor are you using? because I see the result changed instantly after you writing code (without reload)
You had almost too much fun Travis. Almost.
Almost is the operative word. :D
LOLOLOL! You crack me up! :-D
I wish you did all the tutorial videos I watch. I actually stay awake watching your vids. :-D
I'm so happy to hear that you like them Matt!!
Like for that intro. I just couldn't resist...
Never clicked on a video so fast lol. Can't wait to watch Travis!
right haha same!
Thank you so much!!
Awesome Video!! What text app is he using that he doesn't have to add "{}" and ";"?
tThe keyframe transform rotate should have been done in 45 degree increments. It would have been perfect!Still awesome video. You Rock Bro!!!
This video was fascinating enough to motivate me to do 63% of codecademy's HTML & CSS course in one day xD and I'm still going. Awesome vid. And this is coming from a guy who's main focus should be python
Your lessons very meaningful! Many thank from Russia :)
Hello Russia! Thanks for watching :)
Travis when are u coming back ?
Another challenge: make the dots behind disappear. I would say that behind the pacman there is a bar with the background color that blocks everything behind it.
What are you editing in there? Looks funky.
I am watching this at work and having LOL moment on that super fast chapm champ champ (44:19) :D that was so funny :D
HAHAHA, chomchomchomchomcmcmcmcmc. That killed me!
what software do u use for the live preview?
what is the software with code on the side in the vid?
Travis, you introduced me to Pug (Jade) and my sanity thanks you!
Hey Travis, I have an off topic question regarding css. Do you think w3.org css 2.1 specification is a good place to read about some of the css features? Like I'm now learning more advance css concept like box formatting context and I can't find any courses or video tutorials on topics like this except for w3c. Is it legit? Coz it says the spec was written back in 2007 but updated few months ago. Thanks! :)
I love your videos, and your personality. I would definitely be your friends in real life if you weren't weirded out by that comment lol.
keep up the awesome work.
From where can I get that ringtone :P
Dude, I don't get all this before and after stuff. Did you explain this? I don't find it.
What software are you using to record your screen and face at the same time?
Hey great video Travis! But I'd like to see a video on how to make an image preloading animation that disappears when the image is loaded. Could you do that? Or just tell me real quick how it's done :)
That's all done in JS. So the way it works is you place the animation and then tell JS to load new content in when it's ready. It rill replace the spinner.
+DevTips Thank you for your help :)
why the second spinner has a dot as border