Amazing tutorial! I really wanted to add this to my portfolio page which I am building using vanilla JS so thank you so much! Out of all the tutorials this one is the simplest to follow and easiest to implement. Great work
Seriously this right here is the stuff for us new developers and those like me having issues with Javascript. Thank you for bringing some excitement to it!!!
Thanks man, I learn web development 1.5 mouth, and your channel best for study awesome animations, week ago I started learn JavaScript or just 'js'. And I already love this
Really nice tutorial, Ed! Everything really well explained. And the good part about making mistakes is that every new Dev is gonna make mistakes, it's part of the job. But the way you react to it is awesome! You're funny guy. Again, thanks for one more nice tutorial! Peace and keep up the good work! :)
Ed, you've been one of the bigger influences in my recent undertaking of learning JavaScript. You make it fun and light, and always give super clear explanations. Keep up the great work! Also, I saw in this down further in the comments, so thought I'd leave thoughts here. Here are my tweaks to run on multiple elements individually, as well as re-hiding them after they leave the screen. I added the class of "hidden" to the elements I want to animate in the html (this lets me run on multiple elements via QuerySelectorAll, and define initial styles like opacity on every included element) and replace it with the "fade-in" class. CSS: @keyframes fade-in { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; } } .fade-in { animation: fade-in 1000ms ease; } .hidden { opacity: 0; } ______________ JS: const elements = document.querySelectorAll(".hidden"); const triggerMultiplier = 1.5; const windowHeight = window.innerHeight / triggerMultiplier; scrollAppear = () => { elements.forEach(element => { // get each element's distance from top of screen & computed height let positionFromTop = element.getBoundingClientRect().top; let elementHeight = parseInt(window.getComputedStyle(element).height); // trigger animation on scroll down if (positionFromTop < windowHeight) { element.classList.replace("hidden", "fade-in"); } // re-hide elements after leaving the screen if ( positionFromTop > windowHeight * triggerMultiplier || positionFromTop < -elementHeight ) { element.classList.replace("fade-in", "hidden"); } }); }; // run function when scrolling window.addEventListener("scroll", scrollAppear);
Thank you very much. Its very understandable. I would like to ask for some help. For me its load much before I would scroll there to the element( that I want to fade in ). I changed this value: "const triggerMultiplier = 1.5; " , but its still not working, do you know why?
SERIOUSLY AMAZING!!!! I have been working on becoming an developer and have been struggling with Javascript. I finally started understanding it and able to read it but when creating I still am having trouble creating things like this!!! I was able to read the process easily and applied. My new goal is to be able to learn from this and adjust the styles as needed and apply multiple types of animations!!! Again thank you!!!!
Thanks, I've been thinking for months that I wanna add this kind of simple wow factor to my websites. One question: does this work properly if I have several intro-text class elements on the same page? Or will it animate them all when the first intro-text comes into view?
The event listener on scroll causes a lot of problems, I suggest using IntersectionObserver! It only gets called when it passes a certain point (in your case the innerHeight). It's really really cool!! Check it out on mozilla docs
The intro position measures the top of intro-text style, and also we will let screen position know how big our screen is, so if the intro position is less than screen position then the class of the intro-text will be changed to be intro-appear which has opacity of 1 Someone can fix my demonstration, and sorry for my english :)
Hey! Brother, I love your videos and I have a request please make a video on " How to use window width and height in a percentage(%) and how to use it dynamically on scroll in any CSS animation with Vanilla Javascript ".
with this method could you attach another class to the elements so as to use querySelectorAll ? by this i mean if you wanted to animate the text to fade up and the image to fade down would it make sense to attach another class to the elements so they could animated seperately ? not sure if that question made sense:)
Hello, Dev Ed, I'm a new js developer, I built a project from scratch and took your snippet of code on this video but currently, I'm stuck on using it for multiple div elements is there any way I can email you the snippet of code and help lead me in the right direction pls!!. I have been stuck on this problem for a few days now!.
Thanks for a great tutorial. I was looking for something like this example. I have a question. How can a make the picture to appear one time on the right and the other time on the left if for a sample I have few horizontal cards that have the text in half part and the picture in the other half?
Right there I don't add the parenthesis because I am only adding the functions reference. Adding the parenthesis would invoke/run the function. So just add the reference and on scroll it will be invoked for us. Hope that it's clear enough :)
Hey, brotha I'm new to building projects in js so the code you provided for us is absolutely great but 2 things that I'm trying to find out for my situation since my functionality isn't popping up... is my layout with CSS is a little different then your as far as the design so I wanted to find out if that would affect the feature of the js and also when I make a change in my CSS and change it back the text shows the functionality but does continue to keep that feature when I scroll from the top down... is there any way you can check out my code or give me some advice on my problem?.
Nice as always. I asked myself if I could make it reusable for more elements on page, and this is what I came up with: function animateOnScroll(target, triggerPosition, activeClass, reversible = false){ let targetEl = document.querySelectorAll(target); targetEl.forEach(el=>{ let targetElTop = el.getBoundingClientRect().top; let windowHeight = window.innerHeight; if (targetElTop = windowHeight && reversible) { el.classList.remove(activeClass); } }) } Than you call it like this: window.addEventListenter('scroll', ()=>{ animateOnScroll('.elementClass', 0.8, 'fade-in', true) }) reversible true means that effect can go both ways. So Dev Ed, you inspire me :D
It seems I followed everything and its still not working for me. I am sure I missed something but I have no idea what. The console show no issue neither my visual code. Anyone any ideas why?
You can just do if(titlePosition < screenPosition) { title.classList.add("scroll-text-appear"); } else { title.classList.remove("scroll-text-appear"); }
Feel free to ask for any kind of tutorials for the future :)
Hi Ed, can you please show us how to create scroll effects like this - www.minelli.fr/campagne.html. Thanks!
@@muralidollar123 you find many other tutorials on this scroll animation when you search for 'parallax'
Please make a tutorial for how can i give your tutorials more than 1 like
not working for me
Can we create video effects like after effects in browser
Amazing tutorial! I really wanted to add this to my portfolio page which I am building using vanilla JS so thank you so much! Out of all the tutorials this one is the simplest to follow and easiest to implement. Great work
Seriously this right here is the stuff for us new developers and those like me having issues with Javascript. Thank you for bringing some excitement to it!!!
Thanks man, I learn web development 1.5 mouth, and your channel best for study awesome animations, week ago I started learn JavaScript or just 'js'. And I already love this
This is the reason I Love your videos.. Vanilla JS 😍.. Thanks Ed for these kinda videos !!
Thanks Dev Ed, you make difficult things fun and easy. Thank You!
thanks man i really appriciate that i love the way you are explaining the stuff here man
Really nice tutorial, Ed! Everything really well explained. And the good part about making mistakes is that every new Dev is gonna make mistakes, it's part of the job. But the way you react to it is awesome! You're funny guy. Again, thanks for one more nice tutorial! Peace and keep up the good work! :)
Thanks for the lovely comment man!
Amazing tutorial! I really wanted to add this to my portfolio page! Thank you very much :)
omg same!
Not sure how TH-cam knew I wanted to learn this … but I’m glad the algorithm made Ed pop up !! I’m literally gonna try this later .
these are awesome. perfect for bridging the gap between learning the concepts and huge projects. Keep up the good work man
You have every thing What i want to study!!!!!!
Pls upload many vedios .
Thanking You!!!!!!!!!!!!!!!!!!
Thanks for this! So easy to follow and was able to apply it to slide elements in from the side. Thank you!
great!! I was look for this effect. thanks Dev
Man some of the things you say are really hilarious
Should consider to start a one-man-show something like that
What an extraordinary tutorial! Thank you for explaining everything so clear.
I will do my best!
thank you very much dev ed... got this now
Thanks a lot. I've been wanting to learn this effect for a while now. Thank you
great tutorial !
Ed, you've been one of the bigger influences in my recent undertaking of learning JavaScript. You make it fun and light, and always give super clear explanations. Keep up the great work!
Also, I saw in this down further in the comments, so thought I'd leave thoughts here. Here are my tweaks to run on multiple elements individually, as well as re-hiding them after they leave the screen. I added the class of "hidden" to the elements I want to animate in the html (this lets me run on multiple elements via QuerySelectorAll, and define initial styles like opacity on every included element) and replace it with the "fade-in" class.
CSS:
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
}
}
.fade-in {
animation: fade-in 1000ms ease;
}
.hidden {
opacity: 0;
}
______________
JS:
const elements = document.querySelectorAll(".hidden");
const triggerMultiplier = 1.5;
const windowHeight = window.innerHeight / triggerMultiplier;
scrollAppear = () => {
elements.forEach(element => {
// get each element's distance from top of screen & computed height
let positionFromTop = element.getBoundingClientRect().top;
let elementHeight = parseInt(window.getComputedStyle(element).height);
// trigger animation on scroll down
if (positionFromTop < windowHeight) {
element.classList.replace("hidden", "fade-in");
}
// re-hide elements after leaving the screen
if (
positionFromTop > windowHeight * triggerMultiplier ||
positionFromTop < -elementHeight
) {
element.classList.replace("fade-in", "hidden");
}
});
};
// run function when scrolling
window.addEventListener("scroll", scrollAppear);
yay! thank you!
Thanks so much for sharing! I was having a hard time figuring out how to get it to apply to multiple elements.
Thank you very much. Its very understandable. I would like to ask for some help. For me its load much before I would scroll there to the element( that I want to fade in ). I changed this value: "const triggerMultiplier = 1.5; " , but its still not working, do you know why?
SERIOUSLY AMAZING!!!! I have been working on becoming an developer and have been struggling with Javascript. I finally started understanding it and able to read it but when creating I still am having trouble creating things like this!!! I was able to read the process easily and applied. My new goal is to be able to learn from this and adjust the styles as needed and apply multiple types of animations!!! Again thank you!!!!
Wow sir .. Amazing... Thank you so much...love from india... 🙋😍
Wow, you made everything plain and simple. Thanks for sharing, keep it up God Bless.
Thanks for this osm and fun tut!
Feels very good when you do stuffs that are cool in vanilla JS, that way, you can do it in any machine.
#thanx_dev
i really like your channel uh have all tutorials which i always want to learn ..... love ur channel
Thanks, I've been thinking for months that I wanna add this kind of simple wow factor to my websites. One question: does this work properly if I have several intro-text class elements on the same page? Or will it animate them all when the first intro-text comes into view?
9:39 the struggle! lol thanks for the tutorial!
ED just give us the link of codes in description u r not showing the html code completely
Great work around! Can’t stop watching your videos Ed. I would like to see you creating a reusable modal using vanilla JS please. Thank You
Wow best explanation ever... great tutorial
Thank you so much. Great tutorial.
You are a great person
thanks for your time
Cool.... Want some video like this.. Awesome and easy.. And with great explanation..
you saved my project😂 thank you
You are an amazing teacher Ed, please complete your tutorial for React. I am an absolute beginner.
The event listener on scroll causes a lot of problems, I suggest using IntersectionObserver! It only gets called when it passes a certain point (in your case the innerHeight). It's really really cool!! Check it out on mozilla docs
it has no support for IE.
nice short and useful tutorial, easy to follow! Thanks! P.s should be great to have documentation :D
A bit confusing. You delete something in the CSS-file and say we gonna begin here. But you are on like row 40 in the document. Is there code above?
thank you!! your video is soooo useful;)
amazing bro, I'm happy I found your channel
Best Teacher Ever. Thanks a Tonne :)
Aww thanks so much!
Way cool! Thanks for the good work, super appreciate you!
I don't know why, but the way you speak just help me a lot to focus
Sorry Ed!! ,
I didn't get that why we have use (introPosition < screenPosition).
Can you help me plzz.
The intro position measures the top of intro-text style, and also we will let screen position know how big our screen is, so if the intro position is less than screen position then the class of the intro-text will be changed to be intro-appear which has opacity of 1
Someone can fix my demonstration, and sorry for my english :)
Who's this
I knew that ED says "Hey there my gorgeous friends on the Internet" 🤨🤔🧐
Hey! Brother,
I love your videos and I have a request please make a video on
" How to use window width and height in a percentage(%) and
how to use it dynamically on scroll in any CSS animation with Vanilla Javascript ".
Thanks! Worked great :)
the best tutorial !
Good stuff friend. Thank you.
the real content 👌
with this method could you attach another class to the elements so as to use querySelectorAll ? by this i mean if you wanted to animate the text to fade up and the image to fade down would it make sense to attach another class to the elements so they could animated seperately ? not sure if that question made sense:)
Hello, Dev Ed, I'm a new js developer, I built a project from scratch and took your snippet of code on this video but currently, I'm stuck on using it for multiple div elements is there any way I can email you the snippet of code and help lead me in the right direction pls!!. I have been stuck on this problem for a few days now!.
Just implementing it !
#love
Hey, thank you for this video. How do I make this work for multiple elements?
yes it doesn't work
Thanks for a great tutorial. I was looking for something like this example. I have a question. How can a make the picture to appear one time on the right and the other time on the left if for a sample I have few horizontal cards that have the text in half part and the picture in the other half?
Thank you ! ^^
Please come back soon man. We are waiting...
Great video!
Can someone tell me what the CSS looks like for the rest of the page?
What do you mean?
yes, i also had doubts regarding the same.
great tutorial ! keep it up!
Dev Ed, esti tare. Am ras la faza cu getBendingClientRect, dar uite ca face minuni.😂
Great content. Would you be able to share your files?
wow is mezing
Hi how would I be able to change content if I was to link to it as well?
If you want to remove the class you could use
else{
introText.classList.remove('intro-appear');
}
I'm a JS noob - can I ask why you didn't include the parenthesis at 11:00 when you said "not gonna invoke it here" ?
Right there I don't add the parenthesis because I am only adding the functions reference. Adding the parenthesis would invoke/run the function. So just add the reference and on scroll it will be invoked for us. Hope that it's clear enough :)
Thank you :)
Hey, brotha I'm new to building projects in js so the code you provided for us is absolutely great but 2 things that I'm trying to find out for my situation since my functionality isn't popping up... is my layout with CSS is a little different then your as far as the design so I wanted to find out if that would affect the feature of the js and also when I make a change in my CSS and change it back the text shows the functionality but does continue to keep that feature when I scroll from the top down... is there any way you can check out my code or give me some advice on my problem?.
Quality content tbh
great video sir
getBoundingClientRect() is not working in my system it gives error
"if it's not working, just refresh" - my go-to method
Hi Ed, Do you know if I can do this in GSAP without the need to write vanilla JS codes?
great job!
How to make this with "querySelectorAll"?
Thanks)
what if you have multiple div tags with similar class name, how to animate them individually?
Nice as always. I asked myself if I could make it reusable for more elements on page, and this is what I came up with:
function animateOnScroll(target, triggerPosition, activeClass, reversible = false){
let targetEl = document.querySelectorAll(target);
targetEl.forEach(el=>{
let targetElTop = el.getBoundingClientRect().top;
let windowHeight = window.innerHeight;
if (targetElTop = windowHeight && reversible) {
el.classList.remove(activeClass);
}
})
}
Than you call it like this:
window.addEventListenter('scroll', ()=>{
animateOnScroll('.elementClass', 0.8, 'fade-in', true)
})
reversible true means that effect can go both ways. So Dev Ed, you inspire me :D
thanks a lot, I try it and it works
Nice 🤗
BRO THANK YOU SO MUCH YOU SAVED SO MUCH OF MY TIME 😭😭😭
@@vibhorsharma6432 I am glad that you found it helpful! :)
I was looking for you bro... Thanks a lot man🫂
I just wonder how this works with multiple objects (like three or more boxes which each e.g. changes backgroundColor when inView)?
hey, when i apply this animation the text invades my navbar, why does it happen? without animation it does not extrapolate
U r funny ! And I like the video it was help full ❤
Exactly what I was looking for. xD
Nice video!
i loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooove you
Plz upload more effects like that but easy coding ...thanks
i get the error:
getBoundingClientRect in each: undefined is not a function
anyone know a fix?
Can u give us the code
How i can use for multiple divs with the same class name ???
Yo man..thanks a ton..
it's not working in document.querySelectorAll method
Love you ! :D
Thanks
Please upload video about lazyload images.🙏🙏🙏
It seems I followed everything and its still not working for me. I am sure I missed something but I have no idea what. The console show no issue neither my visual code.
Anyone any ideas why?
same as here.
did you solve it ?
me too, i think it misses the href link to these animation source
What is the font?
My effect is not working please help
How to link javascript with HTML?
From where to where we have to put the div tag in the HTML script
My script is
Download movies Within no time !
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.
Bout if you scroll up disappear... how
You can just do if(titlePosition < screenPosition) {
title.classList.add("scroll-text-appear");
} else {
title.classList.remove("scroll-text-appear");
}
how about there's another section below same content, same class, how would you animate that. This way it won't work. anybody help
Dude you're so positive, what your secret? :D
Lots of dopamine
I’m glad I hit the like button on this video at 999 to make 1k likes. I even liked before I watch lol.
You really should start posting your code on github.
I am not able to understand getBoundingClientRect