swiper slide change on scroll using scroll trigger with pin

[shadysw]

hi there

I'm building swiper slider and I need to change it's slides when I scroll. the thing is I need to pin swiper section and unpin it when slider reaches the end. maybe somebody could give me an idea of how I can do this with the help of gsap, if I can.

See the Pen BavyNPJ by vyazemskaya (@vyazemskaya) on CodePen

[Carl]

that could be fairly complex.

if you want to listen to scroll events but not actually scroll the page you probably want to look at Observer.

 

This demo from the GreenSock team shows how to vertically scroll to a pinned a section and use the scrollwheel to trigger animations. 

when the animations are done then vertical scrolling resumes.

 

 

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

 

You might be able to plop in your swiper gallery to the pinned section and call swiper.slideNext() stuff  where they use the  gotoPanel() function on lines 81 and 89.

 

 

[shadysw]

10 hours ago, Carl said:

that could be fairly complex.

if you want to listen to scroll events but not actually scroll the page you probably want to look at Observer.

 

This demo from the GreenSock team shows how to vertically scroll to a pinned a section and use the scrollwheel to trigger animations. 

when the animations are done then vertical scrolling resumes.

 

 

 

 

 

You might be able to plop in your swiper gallery to the pinned section and call swiper.slideNext() stuff  where they use the  gotoPanel() function on lines 81 and 89.

 

 

thank you for an answer! I tried to apply it in my demo, but it looks like I'm doing something wrong, cause it doesn't work

[luisalbertom]

Hi @shadysw, Previously, I integrated GSAP with Swiper for specific projects utilizing GSAP's ScrollTrigger. For further insight, refer to the CodePen and examine the updateSwiperState method in the JS view; it may assist in achieving your objective.

 

See the Pen PoXwpEo by luis-lessrain (@luis-lessrain) on CodePen

[Carl]

I really didn't plan on going down this path, but my curiosity got the best of me.

Although, this is mostly functioning and you can pin the Swiper section AND navigate it with the scrollwheel and via swiping, I really don't think it's ready for use in the real world. 

 

My thoughts are listed in the demo. 

 

The short version is: Locking the scrollbar is asking for trouble.

 

Best viewed in a new window: 

 

See the Pen QWzwmjJ by snorkltv (@snorkltv) on CodePen