GSAP

[hexciaLondon]

Hi crew. I'm trying to get my head around the way GSAP works, so playing with a few CodePens to understand it all. 

 

I've been playing with this CodePen: 

 

As you can see it's a linear downwads scrolling site,  then it switches to a left to right gallery section, then back to down the page. 

 

Currently while you scroll across on the photos, the last photo goes past and then you have to scroll until they all completely disappear from view before it then starts scrolling down again. 

 

I was trying to work out if it's possible to return to the downward scroll at a time when the final photo is completely into view, so as not to have the long section of blank white scrolling? 

 

I assumed it'd be something along the lines of changing the scrollTrigger 'end:' to maybe the variable of the width of the gallery? 

 

Or do I need to chain a separate listener to see when that final image is fully onto the viewport?

 

Any help or gentle nudges, or a flat 'that's not possible' would be really helpful. Thanks!

 

See the Pen BamxgBb by supah (@supah) on CodePen

[Rodrigo]

Hi @hexciaLondon and welcome to the GreenSock forums!

 

I made some changes to your CSS and your code:

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

 

Basically there were two issues. The width of the gallery container wasn't spreading based on the width of the boxes and you were passing a string value to GSAP:

tl.to(gallery, {
  x: `-${gallery.offsetWidth}`, // This is a string
  scrollTrigger: { 
    trigger: galleryWrapper,
    start: 'top top',
    end: `+=${gallery.offsetWidth}`,
    pin: true,
    scrub: 0.5,
  }
})

There is no need to pass a string, although it won't cause a major issue though, but the width of the boxes container was basically the major problem.

 

Hopefully this helps.

Happy Tweening!

[hexciaLondon]

Amazing, genius! 

 

Much appreciated.