Animate On Scroll With Vue JS

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?

Hi, the tutorial is really great, but i have a problem, in main js when I write Vue.directive('scrollanimation', ScrollAnimation); and add v-scrollanimation, on browser my project disappears, there is just nothing, it just becomes white, I do not know why it happens. I hope you know the answer.

What if I want to add it to multiple instances of the same section or component, it's only observing one of them

Gawd
I needed this

Hi, i wanted to thank you because I'm pretty new at this and I've found this video really valuable.

Is it right to use vanilla js in vue please reply

where is the link of this project on git???

Thank you, I like thia method no to hard and use native js.

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

Does this work with vue3?

Привет из России и спасибо большое, помог разобраться!

Hello Webnoob. Have you got any idea how to make this work in Vue 3?

very well done, man. thanks

hmmm niiiiiice tutorial thank u :)

Please continue making vue videos

are u german? i can literally hear it

Thx, hopeful stuff

Hi i met some prob when i use in Nuxt.js, its keep showing IntersectionObserver is not defined, can u help me?

Is there any library that contain many transition and css animation?

Thank You Bro

wow thansk for this tutorial its really helpful.... :) its the best tutorial for animation in VueJs... :)

So nice and easy, thank you dude!

Thank you. Your enunciation gave me cancer.

I get the 'Vue' is not defined error. Does this work on vue3?

Thanks a lot, after a lot of searching and going through numerous videos finally I found something which actually is useful

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 .

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

The best Vue.js animation tutorial... thanks a lot bro! :D

very nice, thanks

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.

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

thanks alot for all your videos

// v-byte-intersect="{ class: 'translate-x', options: {rootMargin: '0px', threshold: 1.0}}"

const newIntersectionObserver = paramters => new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add(paramters.class + '-enter')
observer.unobserve(entry.target)
}
})
},
paramters.options
)
export default {
bind (el, binding) {
el.classList.add(binding.value.class + '-before')
newIntersectionObserver(binding.value).observe(el)
}
}

Waste fellow you wasted my time

didnt work for me , whole page goes to blank

I got a IntersectionObserver is not defined error in scrollanimation.js, I ran npm install intersection-observer , but still getting the error, any clues?

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?

Its working for me too!!! Plz teach me more animation.

Very nice.

this was fun and awesome, thanks a lot. i love your videos

This was really easy to follow and implement thanks!!

🤩🙌🏻🏆 BEST explained! ♥️

thanks it is working fine. how to remove 'enter' class if it is not in viewport?

Thanks 🌸

Great video and awesome explained! Thanks!

Thankyou, i hope you can make more video about animation and transition with vue

Very nice tutorial. how would you integrate it with Nuxt.js?

Amazing.. Thanks again

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!