GSAP Slider Direction Issues

[Chybosky]

Hi Everyone!,

Please I need some help with this GSAP Slider code. I want to switch the Scroll direction to be vertical but when I do, the other slide item doesn't come up.

I look forward to your feedback, Thank you.

See the Pen wvjOMev by Chybosky (@Chybosky) on CodePen

[Chybosky]

After trying to set the slide direction to horizontal, the second slide doesn't appear on the screen.

Codepen link below:

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I take this project and rework it to do these other things...?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

I'd definitely recommend updating to the more modern GSAP 3 syntax (you're using a VERY old syntax - TweenMax/TweenLite/TimelineMax/TimelineLite are all obsolete now, having been consolidated into a simple "gsap" object). See:

 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Chybosky]

Thank you @GSAP Helper

I have converted the Old GSAP to new GSAP code.

Please review the code: 

See the Pen OJZGvew by Chybosky (@Chybosky) on CodePen

[GreenSock]

Unfortunately we just don't have the resources to provide free code conversion proofing, but I do notice several problems: 

• There is no className tweening support in GSAP 3. That was intentionally removed because it's much better to animate the individual properties rather than having GSAP loop through every conceivable property, compare the before/after, isolate the changes, and create the animation accordingly. 
• I don't believe that animating backgroundPosition in that way will work because it's not numeric. You'd need to convert things to use numbers instead. Or create your own plugin to do the calculations and interpolations. 
• Minor note: you're using the old easing syntax. There's a much shorter, cleaner string-based syntax now. Like ease: Power3.easeInOut becomes ease: "power3.inOut"

Good luck!