Jump to content
Search Community

Multi Scroll

KarthickVeera test
Moderator Tag

Recommended Posts

Hey Karthick and welcome. Thanks for being a Club GreenSock member! 

 

This is quite doable with GSAP. The simplest basic setup:

  • Setup your page to have two columns taking up half the width. Have the right side go in reverse order.
  • Animate from section to section based on the scroll position, animating the left side up and the right side down.

If you get stuck let us know and we'll help however we can!

Link to comment
Share on other sites

2 minutes ago, KarthickVeera said:

I tried many ways using scroll magic. 

Scroll Magic isn't a GreenSock product and we don't really support it here.

 

5 minutes ago, KarthickVeera said:

Now I created html

You didn't follow the instructions I gave above... 

 

But since we like to bend over backwards to serve our clients here at GreenSock, here's a basic way you could set it up and do it:

See the Pen OJPVBax?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening :) 

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

Hi @Hesham M and welcome to the GreenSock forums!

 

 

I'm on my phone now so there's not a lot I can do, but a quick glance at your code most likely the issue is that you are creating a ScrollTrigger instance for each column. No need for that, just create one instance for both and pin the parents element. Here is a simple demo showing that:

See the Pen KKeJaqW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

I'm not completely sure I follow what you mean with this:

3 hours ago, Hesham M said:

there causing issue when it scroll  transition takes place bt i think at 10% of it just stops looks odd

 

Maybe that extra white space below the red element? That is because you have set your elements to be 50vw and not 50%. The 50vw means that the space used by the scrollbar is actually taken into account which creates an horizontal scroll. The possible solutions for that are either use percentage instead of vw or give the container element an overflow hidden on both axis (X and Y):

.sections-container {
  position: relative;
  height: 300vh;
  overflow: hidden;
}

Here is a fork of your codepen with that change:

See the Pen YzdEzZm by GreenSock (@GreenSock) on CodePen

 

If you keep having issues, please be as specific as possible in order to really know what you're trying to achieve and the issue you're experiencing.

 

Hopefully this helps.

Happy Tweening!

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.
×
×
  • Create New...