Make 2 divs meet on Scroll

[jbanj]

Hi,

 

I have not been able to find an example to what I am trying to achieve but hopefully I can explain it well.

 

I am trying to animate two images in separate divs to meet at the center of the main div (not overlap) on scroll. One image comes from top, the other comes from the bottom of the screen.

 

Thanks. 

[Cassie]

Hey there @jbanj,

 

This sounds like a job for ScrollTrigger - have you taken a look at the ScrollTrigger docs?

 

Maybe you can give it a go - if you get stuck we're right here! Pop what you've tried into a minimal demo and we'll take a look.

[jbanj]

Thanks @Cassie I know scrolltrigger should be able to do it, but I need a few pointers. Or a working technique. Thanks.

[Cassie]

I'm afraid we don't have capacity to just build custom solutions for people here. (see the forum guidelines)

 

However we're more than happy to help if you've attempted it and got stuck.

 

There are lots of examples in the docs! Here's a little starting point.

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: containerElement,
  }
})

tl.from(image1,{yPercent: -100})
tl.from(image2,{yPercent: 100}, 0)

 

[Cassie]

Here's a collection of demos too. Sometimes it's easier to learn by deconstructing examples.

 

Good luck! Pop back with a minimal demo if you get stuck.