NIK03 Posted August 10, 2022 Share Posted August 10, 2022 Hello, I have noticed that there are not any reference for doing animations on Horizontal scrolling(left and right) on two separate div's in react Ex. This is a rough idea, So here i want to implement horizontal scroll(left to right) and want to add two different animations to both Namee1 and Circle1 at the same time of Horizontal scrolling See the Pen JjLBLNO by NIK03 (@NIK03) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 10, 2022 Share Posted August 10, 2022 Hi @NIK03 welcome to the forum! ScrollTrigger just animates a timeline on scroll, so if you want to animate two things, just have them animated at the same time, with the position parameter and hook it up to ScrollTrigger See the Pen ZExjxPy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 10, 2022 Share Posted August 10, 2022 Also - In React - Link to comment Share on other sites More sharing options...
NIK03 Posted August 10, 2022 Author Share Posted August 10, 2022 1 hour ago, mvaneijgen said: Hi @NIK03 welcome to the forum! ScrollTrigger just animates a timeline on scroll, so if you want to animate two things, just have them animated at the same time, with the position parameter and hook it up to ScrollTrigger It is not working if i apply overflow-x:auto css to container div which is exact problem i am facing .container{ overflow-x:auto; overflow-y:hidden; } Please check my codepen code again i have edited it Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 10, 2022 Share Posted August 10, 2022 In your pen you're not loading ScrollTrigger nor GSAP, so it is not working If you want to load ScrollTrigger on a specific container you can set scroller: ".container", See the Pen jOzpKNx by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now