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: - https://codepen.io/huxburyquinn/pen/poLdMyo
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 - https://codepen.io/GreenSock/pen/LYzXwwZ
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
