user3264210 user3264210 - 1 year ago 82
CSS Question

Website Horizontal Scrolling Activated Animations

I know how to cause animations due to vertical scrolling, but how do you cause animations due to horizontal scrolling?

Answer Source

Same way, you listen to scroll event and watch window.scrollX

var item = document.getElementById("item")
window.addEventListener('scroll', function(e) {
  if (window.scrollX > 100) {
  } else {

body {
  overflow-x: scroll;

#item {
  width: 2000px;
  height: 200px;
  background-color: gold;
  transition: all .25s;
} {
  background-color: red;
<div id="item"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download