How to make two divs slide different directions vertically

[bntratox]

Hello, Im totally noob here so sorry I won't be able to share my codepen because I don't know gsap enough to create one for my own.

I've tried everything I saw on codepen but couldn't be able to do this. In the end I found myself creating an account here.

The thing I want to achieve is as you can see on the image I have a header and a footer, between them I have a sliding div section.

The thing I want is when user scrolls to the middle section, the top pins to top of the screen and this green and yellow divs starts to slide but in different ways. One goes top and the other one goes down. And the new ones meet in the center. 

The sliding must be smooth and the new divs must stick to the top again till the person scrolls again.

And then when there is no divs left in the center, user can go to the footer.

I think its just easy  I feel like all I have to do is do this demo in two seperate divs but even tho I've tried I couldn't make it.

 

How can I do this please I need some help :/

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

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[bntratox]

6 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

See the Pen KKebVMG by mertcanuslu (@mertcanuslu) on CodePen

This is the sample template I want to use GSAP but I don't know gsap enough to use it to make it slide. So I just created the template.

I want to have a slider which triggers by scroll and when user enters the ".slider" div left div slides to top, right div slides to bottom, and then and then..

When there is no ".slide" div left to slide, it can go to the footer.

[mvaneijgen]

Hey @bntratox welcome to the forum!

 

Even a pen that doesn't work is a great starting point to share here, that way we can see your thought process and better help getting you in the right direction. 

 

You could start by checking out the Greensock collections on Codepen (especially the ScrollTrigger once), to see if anyone has made something similar already. https://codepen.io/GreenSock/collections/

 

As a general concept ScrollTrigger is just animating something on scroll, so just focus on the animation at first. Just remove ScrollTrigger in the beginning and only when you're happy with the animation add ScrollTrigger back in.

 

Also check out the Greensock YouTube channel https://www.youtube.com/c/GreenSockLearning/videos, all the info you ever want is on there, or @Carl's channel https://www.youtube.com/user/snorklTV/videos there is a lot of general knowledge to gain from there to implement in your own projects. 

 

Again, remove ScrollTrigger for now, just focus on animating images up and down and share your findings here, so we can help you with specific questions.

[bntratox]

2 minutes ago, mvaneijgen said:

Hey @bntratox welcome to the forum!

 

Even a pen that doesn't work is a great starting point to share here, that way we can see your thought process and better help getting you in the right direction. 

 

You could start by checking out the Greensock collections on Codepen (especially the ScrollTrigger once), to see if anyone has made something similar already. https://codepen.io/GreenSock/collections/

 

As a general concept ScrollTrigger is just animating something on scroll, so just focus on the animation at first. Just remove ScrollTrigger in the beginning and only when you're happy with the animation add ScrollTrigger back in.

 

Also check out the Greensock YouTube channel https://www.youtube.com/c/GreenSockLearning/videos, all the info you ever want is on there, or @Carl's channel https://www.youtube.com/user/snorklTV/videos there is a lot of general knowledge to gain from there to implement in your own projects. 

 

Again, remove ScrollTrigger for now, just focus on animating images up and down and share your finding here, so we can help you with specific questions.

Thank you for your comment, I've sent the codepen above as an example

 

Basically: 

When user enters the "slider" div yellow will go top, orange go down. But at the same time, this row will disappear by sliding and new row (red and blue) will appear at the same time one coming from down one coming from above.

[mvaneijgen]

I saw your demo, but it has no javascript in it, the best way to learn is to get your hands dirty and try a few things. Codepen has the possibility to Fork your work, so just make a few versions and try different things. If you're really new to everything I would recommend doing a view tutorials first.  I've send you two YouTube channels that has hours of really useful content. 

 

You could start with this one. It shows you the basics of using a timeline in GSAP. I would suggest by building something simple first and slowly work towards your goal of creating your ScrollTrigger idea, but you frist have to learn to walk before you can run.

 

Hope it helps and happy tweening! 

 

[bntratox]

1 hour ago, mvaneijgen said:

I saw your demo, but it has no javascript in it, the best way to learn is to get your hands dirty and try a few things. Codepen has the possibility to Fork your work, so just make a few versions and try different things. If you're really new to everything I would recommend doing a view tutorials first.  I've send you two YouTube channels that has hours of really useful content. 

 

You could start with this one. It shows you the basics of using a timeline in GSAP. I would suggest by building something simple first and slowly work towards your goal of creating your ScrollTrigger idea, but you frist have to learn to walk before you can run.

 

Hope it helps and happy tweening! 

 

Thank you but I'm a bit short on time to learn it from scratch. Im trying to figure out how to do that by examples.

See the Pen zYaojeO by joelau71 (@joelau71) on CodePen

This is similar, i forked this and converted into this:

See the Pen xxzmOGa by mertcanuslu (@mertcanuslu) on CodePen

this would work for me. but can you tell me how can I make the left side stick/snap to top when it gets near? And can I make it a bit slow scrolling?

I mean when I scroll I want it to scroll slowly with ease and when the "Test 1" "Test 2" etc. div comes near to top it will stick and pin to top automatically with ease.

 

edit: btw if the left side would come to screen as like the right side from bottom to top it would be awesome.

[Rodrigo]

Hi,

 

You can use a snap config object in order to snap the images as they get closer:

const snapConfig = {
  snapTo: [0,1],
  inertia: true,
  duration: {min: 0.25, max: 0.4},
  delay: 0,
  ease: "none",
};

gsap.to(".img-2", {
  x: 0,
  ease: "none",
  scrollTrigger: {
    trigger: ".part-2",
    start: "top center",
    end: "+=300px",
    scrub: 0.25,
    markers: true,
    snap: snapConfig,
  }
});

gsap.to(".img-3", {
  x: 0,
  ease: "none",
  scrollTrigger: {
    trigger: ".part-3",
    start: "top center",
    end: "+=300px",
    scrub: 0.25,
    markers: true,
    snap: snapConfig,
  }
});

You can read more about that in the ScrollTrigger docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

If you want the elements to come in in different directions, maybe this example could help:

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

 

Finally if you want to pin the left side while the image is animating, that's a bit trickier IMHO and would require to tinker with the timelines that are creating those animations as well. Unfortunately we don't have the time resources to tackle every item from our users' todo lists. We help as much as possible but we can't provide custom working solutions for everyone. If you want you can create a thread in the Jobs & Freelance section of the forums or contact us for a consulting work.

 

Hopefully the resources I shared are enough to get you on track. Let us know if you have more questions.

 

Good luck with your project and Happy Tweening!