dev-ram

Thanks for the suggestion and response. I tried debugging the issue and found some third party libraries and making such issues. I have stopped using that library and its working fine now. Thanks.

i have provided codeSanbox demo. its works. but when it comes to my system it not working as expected. I am using the same script. i have also attached link of my system's screen recording.

I am trying to scroll from one section to another section using gsap.to. its working fine on firefox but not working on chrome. In chrome, it take some delay to start scrolling and scrolling immediate to the next section. here is codesandbox example (its working here but not working in my at my end.) codesandbox sandbox checkout here how it works at my https://www.loom.com/share/ca8a303e5711423d8da526b7b2901e3d document.addEventListener("DOMContentLoaded", function(event) { window.addEventListener("load", function() { var nextSectionButton = document.getElementById('days-rip-btn'); nextSectionButton.addEventListener('click', scrollToSection); function scrollToSection() { gsap.to(window, {duration: 3, scrollTo:"#listening"}); } }, false); });

@Rodrigo Thank you so much for helping and correcting me

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