Jump to content
GreenSock

NIK03

How to Enable animation on two different div's on Horizontal Scrolling from scrolling left to right

Recommended Posts

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

Also - In React - 

 

Link to comment
Share on other sites

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

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

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×