Jump to content
GreenSock

GRVTY

Problem with Horiziontal Scroll Speed and Draggable on Tablets

Recommended Posts

You probably should check it on Large Tablet like ipad pro or on Desktop here on GSAP it shows only the tablet layout.

On resize it doesnt work anymore. Dont know why

 

I am building for Desktop and Larger Tablets a horizontal scroll based design. My problem is that i cant figure out how to make the scrolling smoother and not so laggy and not that fast. Another thing is that the the button works on desktop with gsap scroll trigger and on smaller tablets and smartphone i cant even press it ( the hover/focus/active effect) doesnt appears any suggestions to this problem=?

 

I hope that someone can help me.

 

Thank you very much

See the Pen qBjzydZ by thisisgrvty (@thisisgrvty) on CodePen

Link to comment
Share on other sites

Hello @GRVTY  , I can't see your example (code) , check the codepen link pelase.

  • Like 3
Link to comment
Share on other sites

Dont have codepen, i included a Link To my project

Link to comment
Share on other sites

Welcome to the forums, @GRVTY. Unfortunately we can't troubleshoot live web sites - it's just too time-consuming to try to weed through all the code and we can't make changes to see how it affects things. There are too many factors. Please read the forum guidelines. If you'd like some help with any GSAP-specific questions, please provide a minimal demo and we'd be happy to take a look. 

 

Based on a quick glance at your site, my guess is that you forgot to set the ease to "none" on that horizontal animation. 

  • Like 1
Link to comment
Share on other sites

18 hours ago, Ali Manuel said:

Hello @GRVTY  , I can't see your example (code) , check the codepen link pelase.

I put it on  codepen now. You can check it out.

Link to comment
Share on other sites

You've got a bunch of links that aren't loading and errors in the console, but I'll mention a few things:

  1. To smooth the scrub, just change scrub: true to scrub: 1 (the number represents how long it'll take to "catch up" to the normal scroll position)
  2. You definitely shouldn't be animating the same element that you're pinning. Wrap it in a container element and pin that container instead - then you can animate the children however you want. 
  3. I'd strongly recommend using the modern syntax (duration in the vars object) and get familiar with the position parameter instead of trying to control the positioning on the timeline with negative delays. 
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hey,

would you mind to maybe make an example for the modern syntax? i dont understand how i can transfer it to my code.

 

thank you.

Link to comment
Share on other sites

Hi @GRVTY,

 

There's a migration guide here - 

Hope this helps.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×