CodePen Home GSAP Vertical scroll position absolute split scroller

[GSAP-HQ]

I am reaching out for some technical help.

I am working on a Y scrolling project.

DEMO - https://tympanus.net/Tutorials/FullscreenSlitSlider/

TUTORIAL - https://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

I have converted this to a jQuery Y  viewport scroll project here: - 

See the Pen poLdMyo by huxburyquinn (@huxburyquinn) on CodePen

It's using the demo JS library : https://tympanus.net/Tutorials/FullscreenSlitSlider/js/jquery.slitslider.js

I want to be able to scroll Y through
<section 1>
<section 2>
<section 3>
<section sticky-main > pin the slider animation and scrub through 5 slides
and continue scrolling  Y 
<section 4>

<section 5>

<section 6>
 

On the above CodePen  - I have JQuery to addClass() and removeClass()  ".sticky" 
However, When I add the slitslide page count   (currently commented out ) to get to the end of the 5th slide (to remove class sticky) I end up with a flicker.
I think this may be a conflic with CSS  scroll-snap-type: y mandatory; as each slitslide tries to addClass .sticky

I could not solve this  . . . 
So this jQuery project is currently on hold. (Unless you know jQuery ? )

- - - - - - - - - - - - - - - - - - - - - - - - 

I stumbled up on this GSAP demo which allows pinning and scrubbing - 

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

 

I have implemented my GSAP project here: - codepen.io/huxburyquinn/pen/wvmpmvd

I think technically I have gone as far as I can go with GSAP.

I would need to implement a JQuery function so that the GSAP Pinned slitslider elements cycled through      slitslider.next();  slitslider.previous();  with the GSAP  scroller


Would love to get an experts help on this final hurdle.

Look forward to your feedback 

Kind regards
 

See the Pen wvmpmvd by huxburyquinn (@huxburyquinn) on CodePen

[Cassie]

Hi there!

 

Welcome to the GSAP forums. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting. If you're after thorough/general technical help on a project, it's often more helpful to post in the "Jobs & Freelance" forum for paid consulting. Some people in the past have hired a freelancer to step through a certain piece of their project alongside them and that seems to work for this kind of challenge.

 

We're happy to help here with more directed, specific questions about the GSAP API but I've battled a little working out what they are from your post.
 

Quote

I would need to implement a JQuery function so that the GSAP Pinned slitslider elements cycled through      slitslider.next();  slitslider.previous();  with the GSAP  scroller

 

Maybe you're looking for callbacks here? You can add a function to any point in the timeline with.call
https://greensock.com/docs/v3/GSAP/Timeline/call()

 

You also have all the standard callbacks like onStart and onComplete that you can use in tweens or in timelines.

I hope this helps, feel free to rephrase/elaborate a little if not and we'll try and point you in the right direction.