Thanks, I wanted to learn how to scrollanimate in VueJS but ended up learning about VueJS directives and InterseptionObserver in addition to ScrollAnimate. Great video
I honestly consider you my main source of advanced Vue knowledge. I knew everything there was to know about Vue but i was always seeking a mentor to get ideas from when it comes to crafty and creative Vue front-end designing and you are by far the best I've found. Thank you so much for your amazing knowledge transfer. I would love to work with you and support you.
Thank you for your words of encouragement, that motivates me enormously. If you want to support me then I would be happy if you become a patron. You can also join my discord at any time. The links can be found in every video description or in the About section. I always look for suggestions. If you want to see a specific topic, please let me know. 🙂
@@Webnoob I will 100% join your discord and become your patreon. One suggestion i strongly have is a crafty tabs component for displaying tabbed content. Most libraries have boring tabs. It would be amazing to see your crafty version of a really nice tab component. Thanks.
Really enjoying the content, always learning something new, also the production quality of the videos is great too. Now don't take this the wrong way, but I feel what's lacking is the audio quality in general and also the quite thick accent might turn viewers away and have them miss out on some really good vue-explanations. Might want to work on that, if more exposure is something you are interested in. I'm gonna keep watching regardless, keep the good stuff coming! Grüße aus Dresden!
Thank you for your comprehensive feedback. I know that my Vue skills are better than my English. I continue learning. But funny is that only my compatriots complain about my accent. People from other countries give so far only positive feedback on my accent and how I explain the topics. My accent is part of my personality and it will always stay that way. Why should I sound fluent? Most of my viewers are not from English speaking countries. There are many great people from India, Indonesia, Brazil, Egypt or Russia and many other countries watching my videos. Don't worry, I will not take it personally. 😉 In Dresden bin ich aufgewachsen 😄
Hi, thanks for the nice tutorial... its working. But I would like to have it work always when scrolling. Currently its only one time working when the page is loaded. Is there a quick solution for that? Danke und Grüsse aus der Türkei
Yes, you can set an else block in the directive in which you can remove the CSS class 'enter'. And you have to delete the line with the unobserve method in the if block to keep the observe status.
@@Webnoob great!! its working... first there was an error "'animatedScrollObserver' is defined but never used". So I had to remove it from ".....(entries, animatedScrollObserver)". Thanks again!!!
First, you should remove the unobserve function in the scrollanimation.js. And then you can use an else block for removing the enter class, if the entry is not intersecting. Or you can add another one for a fade-out animation or something like that. Keep it going 😉
I got a IntersectionObserver is not defined error in scrollanimation.js, I ran npm install intersection-observer , but still getting the error, any clues?
The animation is working like magic on scroll , but what if have different animations for different elements on the same component ? I really need help .
I made this project with Vue in version 2 and it doesn't work with Vue 3, but I have a quick migration tutorial on my channel that might help you: ruclips.net/video/yO3XPzqklvE/видео.html
Very awesome stuff on this channel! Thanks for that! Your accent sounds a little bit sachsen-germany ;-) You´re welcome! I have a question: is it possible to define the 'translateX'-value with the directive like 'v-scrollanimation="100"'? I tested bind(el, binding) { el.classList.add('before-enter'); animatedScrollObserver.observe(el); el.style.transform = 'translateY(' + binding.value + 'px);' } but it does´nt work.
Thank you for this tutorial because it is amazing! Question: is there a way to control the threshold for when an animation happens? That is, when intersectionObserver spots an intersection, is there a way to control at which distance on the page to spark the animation?
This is an interesting question. I think one way would be to register the directive as a Vue plugin. It’s a normal javascript file, in the end. But I haven’t tested this yet. It’s only an idea. 😁
Since it's just vanilla JS you can reference every section of your page and access it as normal DOM element by this.$refs and then add new class to it.
Is it possible to take binding value and do something similar to vue transition to set different animation for different elements in same vue component?
Vue 3 is around the corner! Getting started with this tutorial: ruclips.net/video/fZStE3DpFes/видео.html
nice
Hello Webnoob. Have you got any idea how to make this work in Vue 3?
The best Vue.js animation tutorial... thanks a lot bro! :D
SUBSCRIBED!
Glad you think so! Thank you 🙏💚
Thanks, I wanted to learn how to scrollanimate in VueJS but ended up learning about VueJS directives and InterseptionObserver in addition to ScrollAnimate. Great video
Great to hear! High Five 🖐🙂
I honestly consider you my main source of advanced Vue knowledge. I knew everything there was to know about Vue but i was always seeking a mentor to get ideas from when it comes to crafty and creative Vue front-end designing and you are by far the best I've found.
Thank you so much for your amazing knowledge transfer.
I would love to work with you and support you.
Thank you for your words of encouragement, that motivates me enormously. If you want to support me then I would be happy if you become a patron. You can also join my discord at any time. The links can be found in every video description or in the About section.
I always look for suggestions. If you want to see a specific topic, please let me know. 🙂
@@Webnoob I will 100% join your discord and become your patreon. One suggestion i strongly have is a crafty tabs component for displaying tabbed content. Most libraries have boring tabs. It would be amazing to see your crafty version of a really nice tab component.
Thanks.
That’s a fantastic Idea. It‘s on my todo list now. ✌️🙂
Thanks a lot, after a lot of searching and going through numerous videos finally I found something which actually is useful
Glad to hear that 😎
Thank you so much for this tutorial, I have learned something new !!!
Hey welcome back Stephan ✌️😁That’s amazing and my work finally makes sense 😂
Hi, i wanted to thank you because I'm pretty new at this and I've found this video really valuable.
Hi! I have a problem, I don't know if you can help me.
For some reason the images are cut off or flickering before animation, how could I solve it
Really enjoying the content, always learning something new, also the production quality of the videos is great too.
Now don't take this the wrong way, but I feel what's lacking is the audio quality in general and also the quite thick accent might turn viewers away and have them miss out on some really good vue-explanations.
Might want to work on that, if more exposure is something you are interested in.
I'm gonna keep watching regardless, keep the good stuff coming!
Grüße aus Dresden!
Thank you for your comprehensive feedback. I know that my Vue skills are better than my English. I continue learning. But funny is that only my compatriots complain about my accent. People from other countries give so far only positive feedback on my accent and how I explain the topics. My accent is part of my personality and it will always stay that way. Why should I sound fluent? Most of my viewers are not from English speaking countries. There are many great people from India, Indonesia, Brazil, Egypt or Russia and many other countries watching my videos. Don't worry, I will not take it personally. 😉
In Dresden bin ich aufgewachsen 😄
@@Webnoob Good point! 😄 I guess you really only pay attention to the accent if you know it's origin.
Use subtitles, when your are looking for solutions accent would be the least of your worries.
Hi, thanks for the nice tutorial... its working. But I would like to have it work always when scrolling. Currently its only one time working when the page is loaded. Is there a quick solution for that?
Danke und Grüsse aus der Türkei
Yes, you can set an else block in the directive in which you can remove the CSS class 'enter'. And you have to delete the line with the unobserve method in the if block to keep the observe status.
@@Webnoob great!! its working... first there was an error "'animatedScrollObserver' is defined but never used". So I had to remove it from ".....(entries, animatedScrollObserver)".
Thanks again!!!
Oh yeah, I forgot about that, sorry!
This was really easy to follow and implement thanks!!
It’s my pleasure 🙂
thanks it is working fine. how to remove 'enter' class if it is not in viewport?
First, you should remove the unobserve function in the scrollanimation.js. And then you can use an else block for removing the enter class, if the entry is not intersecting. Or you can add another one for a fade-out animation or something like that. Keep it going 😉
this was fun and awesome, thanks a lot. i love your videos
It's my pleasure. Often you don't really always need an additional library for simple things.
Gawd
I needed this
wow thansk for this tutorial its really helpful.... :) its the best tutorial for animation in VueJs... :)
Glad you like it and thanks for your feedback. 🙂
Is there any library that contain many transition and css animation?
Thankyou, i hope you can make more video about animation and transition with vue
Yes, as long as I don't run out of ideas. ;-)
Thank you, I like thia method no to hard and use native js.
So nice and easy, thank you dude!
My pleasure, dude ;-)
I got a IntersectionObserver is not defined
error in scrollanimation.js, I ran npm install intersection-observer
, but still getting the error, any clues?
Browser compatibility? developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility
Great video and awesome explained! Thanks!
Thank you for taking the time to watch the video!
The animation is working like magic on scroll , but what if have different animations for different elements on the same component ? I really need help .
You can use or add some options for a Directive as I use in this video: ruclips.net/video/x__aHTNyu6E/видео.html
very well done, man. thanks
I get the 'Vue' is not defined error. Does this work on vue3?
I made this project with Vue in version 2 and it doesn't work with Vue 3, but I have a quick migration tutorial on my channel that might help you: ruclips.net/video/yO3XPzqklvE/видео.html
Hi i met some prob when i use in Nuxt.js, its keep showing IntersectionObserver is not defined, can u help me?
Keep attention on which mode you're using Nuxt.js The IntersectionObserver is only available in the browser (Client Side).
@@Webnoob what do we do if we need it in SSR mode?
Very awesome stuff on this channel! Thanks for that! Your accent sounds a little bit sachsen-germany ;-) You´re welcome! I have a question: is it possible to define the 'translateX'-value with the directive like 'v-scrollanimation="100"'? I tested
bind(el, binding) {
el.classList.add('before-enter');
animatedScrollObserver.observe(el);
el.style.transform = 'translateY(' + binding.value + 'px);'
}
but it does´nt work.
Of course, but the translateY value is the starting point in this case. And I highly recommend observing the element as the last step.
Thank You Bro
Keep it going ;-)
Great! I really love your videos!
Nice that you're back and take the time to watch. Your tutorials are really enjoyable. Keep up the great work!
@@Webnoob yours looks better, tutorials like! I was always here, but because of lots of notifications, I miss some videos.
Thank you for this tutorial because it is amazing! Question: is there a way to control the threshold for when an animation happens? That is, when intersectionObserver spots an intersection, is there a way to control at which distance on the page to spark the animation?
Hello Dwight, could you solve the problem from the user Faruq? I think this is a Problem when you use Vue 3 instead of Vue 2.
Very nice tutorial. how would you integrate it with Nuxt.js?
This is an interesting question. I think one way would be to register the directive as a Vue plugin. It’s a normal javascript file, in the end. But I haven’t tested this yet. It’s only an idea. 😁
Since it's just vanilla JS you can reference every section of your page and access it as normal DOM element by this.$refs and then add new class to it.
@Spiderous That's an interesting point, thanks for the hint. Unbelievable how many ways we can go to solve these kinds of stuff.
@@Webnoob That's why I love programming. Multiple solutions that people can come up with, not to compete but to help each other. :)
Does this work with vue3?
Please continue making vue videos
hmmm niiiiiice tutorial thank u :)
Its working for me too!!! Plz teach me more animation.
Happy to help!
Is it possible to take binding value and do something similar to vue transition to set different animation for different elements in same vue component?
for e.g, and then in css .slide-enter{}
Yeah, of course, it's possible! I would prefer different CSS classes here. You can also combine additional classes using SCSS.
@@Webnoob I don't know how to do this :(
@@basic_t339 @Webnoob it didn't work :(
@@basic_t339 @Webnoob it didn't work :(
thanks alot for all your videos
Glad it was helpful ✌️
🤩🙌🏻🏆 BEST explained! ♥️
Thanks, it's my pleasure. 😊
very nice, thanks
Thank you 🙏 for watching my stuff 🙂
Thx, hopeful stuff
Thanks 🌸
No problem ☕
where is the link of this project on git???
Very nice.
My pleasure 😇
Like for using bali as example
Beautiful place ✌️🙂
Amazing.. Thanks again
Hey Andre, thx for watching ✌️
Is it right to use vanilla js in vue please reply
absolutely bro
Привет из России и спасибо большое, помог разобраться!
Мне он тоже помог
didnt work for me , whole page goes to blank
Sounds like a feature 😄
are u german? i can literally hear it
What if I want to add it to multiple instances of the same section or component, it's only observing one of them