Search code examples
javascriptcssanimationscrollcss-animations

Move text only when scrolling - Framework?

Hello, everyone!

Is there a framework or something else that makes it easy to move text (to the left or right) when the user scrolls (for example near the footer)? So a pure scroll animation.

Thank you in advance!

I tried Scrollmagic, but i cant handle it. :/

Solution

  • You can try gsap , however if you want to make it without a framework using scroll event you can try :

    const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const container = document.getElementById("container")
const rect = container.getBoundingClientRect()

const animate = (element,position) => {
     element.style.transform = `translateX(${position}px)`
} 

       

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;
    
   window.requestAnimationFrame(function() {
     
      animate(first,lastKnownScrollPosition*.2)
      animate(second,lastKnownScrollPosition*-.2)
      animate(third,lastKnownScrollPosition*.2)
      
    });
});
    body{
  height: 200vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#container{
  max-width: 100vw;
  overflow: hidden;
}

h1{
  transition: transform 0.2s linear;
}
    <body>
<div id="container">
  <h1 id="first">
   this is a text this is a text this is a text
  </h1>
  <h1 id="second">
    this is a text this is a text this is a text
  </h1>
  <h1 id="third">
    this is a text this is a text this is a text
  </h1>
</div>
</body>