JavaScript Tutorial - Trigger CSS3 Transitions Control Animations

[@NathDre]

I've seen a few, but in just this one video, Adam has become my favourite online JS tutor! Really engaging, well paced and informative! Several 'eureka' moments throughout this one video and you've pulled together the random bits of knowledge I already had. Really happy to have found this series and look forward to working through the rest. TLDR: THANK YOU, ADAM!!

[@AdamKhoury]

Awesome... thanks for the feedback.

[@treyjimmy3589]

A tip: watch movies on Flixzone. Been using it for watching lots of of movies during the lockdown.

[@keanudawson8657]

@Trey Jimmy Definitely, have been using flixzone} for since december myself =)

[@leroyjamison5700]

@Trey Jimmy yup, have been using flixzone} for since december myself :)

[@jamesroland3629]

@Trey Jimmy yup, I have been using flixzone} for since november myself :)

[@lukedominicodonnell2347]

Adam, I mean this in the best possible way....You are the KING!! of simplified explanation. My lecturers were no where near as succinct.

[@acromaticgaming-minecraftm5003]

Dude, you deserve to make millions. Literally not joking. How have you NOT made an animation javascript library.

[@automationsolution]

the right combination of pace, content and tools. i have started my web dev journey with this.

[@Defender2516]

DUDE!!! THIS IS EXACTLY WHAT I WAS LOOKING FOR! THANK YOU!!!!

[@19mamo74]

I just stumbled upon your vids. I'm new learning all of this stuff, and this topic is exactly what I've needed clarification on. Of the books and online tutorials I've come across, this has been, by far, the most straightforward and easy to understand! Thanks for the excellent tutorial and the inspiration. Looking forward to learning more.

[@terrencelouis7075]

These are amazing. You stick to the point and you explain all of your actions thoroughly. So easy to watch and pay attention to. Entertaining as well. Great job.

[@martingibonartpetras]

This is really something I was looking for for years

[@savannahmash]

..."one line..slim clean lightweight " well put, let javascript handle the DOM selection etc and css to implement..thanks great tut!

[@berat013]

best tutorials in youtube ur great

[@toby1kenobe]

Great, i love your videos and in particular the teaching style. Don't know about everyone else but you certainly pitch at my level! You manage to show things simply without patronising us. That's not an easy skill. Anyway, thanks again for giving us this stuff free!! Toby

[@huslerbling]

I learned in 20 min what i couldn't learn in weeks. Thank You!

[@shortToGND]

you are the man, the best tutorial i've ever watched

[@EntropyVX]

I was about to say the same thing :)

[@ankanpaul747]

Awesome! your tutorials are just wow..!!! i am learning a lot..!! a tonne of thanks..!!! keep up the good work, Adam Khoury

[@jossylopes]

Best tutorial, straight to the points. Keep it up man.

[@AdamKhoury]

Thanks, will do.

[@Myrslokstok]

First exampel actually woorked. I love it! One dollar to you! This is great!

[@tkstdude]

You are the best teacher ever!!!!!!

[@bdebouck]

Great tut Adam as always, I bow to the Teacher

[@stephyale93]

I love your tutorials! they're perfect!

[@LeslieVMooreJr]

Great video! I appreciate you sharing your coding wisdom. Thank you!

[@yanistancheva3076]

Hi Adam, I really enjoy watching your tutorials, I find them easy for understanding by beginners like me. I would like to ask you about the onclick event, do you normally use it, or it's just for the tutorial? Because I know that's a very old method as they've been replaced by event listeners? :)

[@yanistancheva3076]

lol, I still don't know much stuff about jQuery, as I'm trying to understand JS first :)

[@gorgalsi]

ти българка ли си ?

[@yanistancheva3076]

Българка, да :))

[@gorgalsi]

Yani Stancheva в България ли си в момента ?

[@yanistancheva3076]

gorgalsi​ не, живея в Англия, ти?

[@fly0wz0me]

Great, now I can create drop-down menu using JavaScript.

[@xkluzivtv]

Problem: I was able to get the onclick for slideClosed on the element of the . However, I had to create a button for the slideOpen. I could not merely use one onclick to for closing and opening the element. The other problem is that I want to use the slideClosed and slideOpen for more than one block and every time I click on the second block the first block performs the function rather than the second block. However, when I eliminate the javascript and use the CSS3 :hover function I can control each block individually, except that I cannot get the close hold long enough for the user to select a link because as soon as I move the cursor from the slideClosed it opens. I believe onclick should be able to be included in CSS3 like :hover it would make the transitions more manageable for the webmaster and thus the end user.

[@xkluzivtv]

How can you perform these tasks without the buttons. For example, with your slide-close, slide-open you used buttons, however, if a webmaster wanted to have the user click on the element rather than using a button, how does the code change?

[@iperpituallocomotionz7751]

Definitely one of the best Hats off to you

[@janhajek1875]

Thank you! l was looking just for nice tutorial in JS and you are one of of the best!

[@autopilot6942]

That's exactly what I'm looking for thanks man!

[@CASMANWHAT]

awesome channel. thank you so much! gonna share this with all my buddies that wanna learn too.

[@senthilbalaji6489]

really awesome video!! perfect for non-absolute beginner programmers!!!

[@williamstidhem6122]

You are the very best out there. A masssssss of super useful information and tidbits. ThaNk yOu!!!

[@gravics]

Great ideas and useful solutions. Thanks Adam.

[@steveherbert504]

Superbly presented and demo examples clearly explained!

[@liatfried8131]

Such a great tutorial. Thank you!

[@cmcdonough2]

Thank you for making this. Awesome, life changing free education.

[@sashaprsheer]

This is amazing! Thanks for the update!

[@eiclbackup]

adam khoury good teacher love it

[@MaheshMV666]

exellent and this is my first animation finally worked

[@highgaugedesign]

Your the best teacher. Thank you

[@mohamedosama9312]

thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu. man this is tutorial saved my life. 😍😍😍😍😍😍😍😍😍

[@theinvestigatorx]

FANTASTIC!!!!! Great teaching I like it.Thanks,

[@kannanshanmugam0709]

Hi, thanks for the wonderful tutorial. I'm working on Animate.css and I wanted to animate several elements in different parts of the page, but the animation happens right after the page is loaded and when you scroll down to the elemnts at the bottom of the page it doesn't animate. because its already done animation after the page load. Can you make a tutorial to make the elements animate using Animate.css and only animate when its visible in the browser.

[@ujjawalchatterjee]

Use wow.js

[@paolomonasterio169]

Very good tutorial! Thanks to you..

[@tseriess8995]

This is really nice tutorial :) Thanks!

[@WOXZE]

all of this Guy tutorials are really helpful. Thanks Mr. Adams! You're the Master!

[@chiru6753]

In order to get the transition effect , do we have to give initial styles via id selector (or) can we give using class selector also?

[@brigidoduarte4651]

Hello friend I am from Paraguay course using Visual Basic aspnet thanks for the course

[@Chockie73]

Hi Adam, I am just starting my web development journey and so far your videos about Javascripts are very informative. I'm wondering how do I create scripts on two events in sequence, for example, making a sticky navigation followed by a transition effect. I have created a sticky horizontal navigation with the links on the right side. When it sticks at the top of the page, a logo would appear sliding from the left. Your transition example in this video is perfect but I just could not make it work since I'm just new to this. Appreciate any feedback you could give.

[@HopWorksET]

Awesome video and very well explained! Thank you!

[@danielgarr4030]

wow...you ARE the man. tyvm.

[@MichaelMarklMM]

This is perfect! Thank you so much! :D

[@PawanMall]

again a very good tutorial :)

[@trezesp8271]

Hi man, your videos are great!! i am learning a lot. Can you tell me what editor do you use to create your websites? and what OS do you use? Thanks!! - keep teaching us

[@General_Aladeen]

Dreamweaver and Windows OS.

[@General_Aladeen]

this is badass!

[@manishmahadevan]

Dude i owe you so much !!

[@malachi5813]

Adam great stuff man thanks! Mucho!

[@halston696]

That's because you need the prefix, like "webkitTransition" for WebKit, or "mozTransition" for Firefox, and so on and so forth :)

[@mrtomsandiego]

Thank you so much, great tutorial

[@MRMOTOFOTO]

Very Nice.....Is there a way to have one button to control slide in and out. Been hacking away at it all day and can't seem to figure it out

[@romelleonidas2423]

thank you for this tutorial man

[@dreamcare100]

This tutorial very nice and helpful good and better. Thank you Develop PHP

[@OrionArcadia]

How can you detect when the transition has finished to call another transition?

[@julyamachado5845]

Like leaving closed by default? Loading the page the box is open. As you leave the box closed by default?

[@sundariMamulu]

loved that video

[@ArboxMusic]

Dear Adam, Wonderful tutorial; thank you! I have got one question; What if I want to execute one transition after the other? So for instance, to let first an object move from left to right 100px, and then move this object down for 50px. Hopefully you will read this comment and send a reply :). Thank you!

[@hfe1833]

this is the one I'm looking for. JavaScript triggering the animation. if you could video for Ajax to trigger much appreciated

[@joshuaketer]

Hey dude.. this is just awesome

[@dandlion007]

thank you.. awesome!

[@RicardoLopez-bw4yo]

Very nice!

[@phillarragoite709]

this is dirty adam thx

[@KumarGaurav-ty5nw]

thank you for giving this Awesome free education ..plz make some tutorial for animation trigger on mouse control i.e, on moving mouse left to right or something like this.

[@salihkesepara3703]

You are awesomeeee!!!

[@ysfbkrcn]

thx, great video!

[@ako2357]

Thank you very much.

[@randelabratique6090]

THANK YOU!!!

[@hanksmarl]

Thanks, nice tut buddy.

[@krimbelkacem5751]

thank you very much

[@MarvelArian]

please help me Create a circular timer widget. i.e. given a time say 30 seconds, the time digits displays in middle of a doughnut type circle and the doughnut changes color as each second passes. Say the circle is filled with color red and as time reduces from 30 to 0 portion of the circle transforms from red to white in that ratio. The input to the code would be a time in seconds and on clicking a button the timer should start

[@HTMLCSSjQueryTuts]

I'm sure Adam has a lot to do but, if you want to post or message me your code I can help you try to figure out the problem. I followed it and it worked great on my end. Notepad++ shouldn't be causing any problems. It's a pretty decent IDE.

[@mocomadnes]

Good job man, I learned to do this with css3, all browsers support this? my question is why they always had to place the prefix-webkit-,-mox-etc ...

[@shamimreza5325]

If i want slide in with slideIn button in first click and i want slide out when i click slideIn button second time. Then what should i do?

[@yuhanli0921]

Hi Adam, for getElementById, why can you target function parameter?

[@yuhanli0921]

sorry, that was a stupid question, I got it.

[@Stefan-wn7wi]

Hey, Thank you so much for your awsome Tutorial! Everything works perfectly! But I have one simple problem. How can I do this with for example margin-left? when I try this it doesn´t work. I think it is because the "-". Pls help! .__.

[@sandeeppandey5364]

it was awesome..liked it

[@chimpionboy]

Thank you for this tuts

[@dmv_p]

Great again! Adam, what is your position on java security?

[@TheRonron1994]

Hey.. I really need a help.. I have 4 div's naming 1,2,3 and 4.. 1 and 2 are aligned together.. 3-4 are aligned.. What I want to happen in my Homepage is when I hover the 1 div.. This 1 div will expand its width occupying the space of the 2 div.. The 2 div then will decreased its width... How am I going to do this..? Please I really need a help..

[@alexander6510]

wow you really love the word buttery

[@dabest7705]

what application are you using?

[@jackwright7014]

Adobe Dreamweaver.

[@ssegrubyhtomit6364]

i made a small mistake took i put var elem = document.getElementById('el'); when it was var elem = document.getElementById(el); hard to find these mistake

[@internetresident3894]

Dude, thanks🤗🤗🤗

[@vatsaljoshi4390]

you are best thanks pls upload more videos

[@dodobig6812]

how do I make these two functions into one?? Use if statement ? how to write it?

[@karannarre5260]

can you show us how to add box shadow by this function

[@liinalif822]

can I change multible parameters of elements just one button click? Like opacity and height same time? Is somebody know ho to do that?

[@aminemakhlouf5283]

Hi everyone, I couldn't understand the get element by id here, there's nothing in the document with the id "el". Can someone explain to me please :)

[@Howto-rz4ur]

Tysm bro , you are best subscribed 😊

[@manoj225ful]

thanks

[@hamberg42]

this was very easy to follow thanks. but how can a noob make 1 button fade in on the first click, and fade out on the second click, and repeat. i have a nav bar I want an object to fade in and out on every other click for that navigation element.

[@xkluzivtv]

How to you get javascript CSS3 transitions to work without using a button? Can you provide those type of examples...Thanks

[@NzeluHub]

awesome

[@four321zero]

can i do an onclick event without script? Just CSS?

[@AdamKhoury]

You can target the CSS "active" selector to sort of simulate onclick. But it's not really the same thing. www.developphp.com/lib/CSS/active Targeting events in JavaScript opens up a massive amount of user interactivity that CSS cannot replicate. In CSS you only get a few user interactive states.