Animate on scroll
Hello, I know how to use animations appear from top, left, bottom, right, etc. But how can I make them only appear when scrolling, most of the videos on youtube use Javascript Libraries, I just want to use original (vanilla I think?) javascript. Thank you
https://codepen.io/Eddiev10/pen/jOjqjvB
8 Replies
You could try using scroll timeline with a polyfill https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline
MDN Web Docs
scroll-timeline - CSS: Cascading Style Sheets | MDN
The scroll-timeline CSS shorthand property is used to define a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right). scroll-timeline is set on the scroller that will provide the timeline. The starting scroll position represents 0% progress and the endi...
Thank you Zach, unfortunately it's not support on any browser. https://caniuse.com/?search=scroll-timeline
*many not all, but many.
That is why "polyfill" was mentioned.
I think you guys are too advanced for me. I've seen scroll-timeline and know that it's not supported anywhere, and I don't know what polyfill is so I googled it, and it just saying javascript code to falll back on, if not supported?
I was just hoping for a little bit of Vanilla Javascript, Thanks
If you want to use vanilla Javascript, there are two techniques available, which are scroll events and intersection observers. The choice depends on the specific type of scroll linked animation you want. Intersection observers are useful for starting and stopping animations based on what is visible, but they are not ideal for controlling the amount or speed of the animation based on the speed of scroll or scroll position. The scroll event is better if you want the scroll speed or position to control the animation.
Thanks. Im taking this Js
const scrollElements = document.querySelectorAll(".js-scroll");
const elementInView = (el, dividend = 1) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
(window.innerHeight document.documentElement.clientHeight) / dividend
);
};
const elementOutofView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop > (window.innerHeight document.documentElement.clientHeight)
);
};
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)
}
})
}
window.addEventListener("scroll", () => {
handleScrollAnimation();
});
Web Design Envato Tuts+
How to Animate on Scroll With Vanilla JavaScript | Envato Tuts+
In this tutorial youβll learn how to implement an animate on scroll feature using vanilla JavaScript and CSS.
Thank you, for taking your time and responding.