I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up
At my end its not working on scroll down but working fine with scroll up
I have tried the following.
import { useEffect, useRef } from 'react';
import { gsap, Power1 } from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';
function WeHeard(props) {
gsap.registerPlugin(ScrollTrigger);
useEffect(() => {
const animation = gsap.timeline({
scrollTrigger: {
trigger: ".hearedListing",
scrub: true,
start: "top 10%",
end: "bottom top",
markers:false
}
}).from('.hearedListing li', {
x:300,
autoAlpha:0,
duration:4,
stagger:2,
ease: Power1.out
});
}, []);
return <>
<section className="heared-listing hearedListing" >
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<h2 className="animate-heading">We heard</h2>
<ul className="list-unstyled primary-text-color h4 mt-5">
<li >Here is my line one</li>
<li >Here is my line two</li>
<li >Here is my line three</li>
<li >Here is my line four</li>
<li >Here is my line five</li>
<li >Here is my line six</li>
<li >Here is my line seven</li>
<li >Here is my line eight</li>
<li >Here is my line Ten</li>
</ul>
</div>
</div>
</div>
</section>
</>
}
export default WeHeard;
I am created a codesandbox here