Jump to content
Search Community

Draggable :: How to Drag x position and page Scroll up & down ?

_larry_ test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all ;)

 

Well, imagine there an basic html page with header and a content on a small screen (mobile or tablet). 

 

- The content element is highter than the screen, so to see full content you have to scroll down the page, and up to rich the top of the page.

 

- The content element is an Draggable instance, is locked on the x axis, and then user can swap left or right to change the content ... with nice gs animation (great:).

 

- My probleme is : when user srcoll down enougth to see only the content element on screen, there is no way to scroll or implement touchEvent to scroll down or up the whole html page ? arg ?

 

Well I don't know how to solve this ?

 

UPDATE :

See the Pen rBhas by _larry_ (@_larry_) on CodePen

Just scroll down to the content view to get it in full screen on mobile device or little browser window...

 

I've just read this post to, like carl schooff said :  I'm really not sure what we can do in the API to "sometimes intercept the intereaction with the Draggable and initiate a page scroll"

 

Well, I was just hoping that there where a properties to do that.... instead of doing crappy hacking things.

 

Let me know if I'm wrong, but the only solution I found is to reduce de Draggable instance width and height , and let the user the possibility to scroll up and down the html page by touching the screen where the the Draggable instance is not. Like a colon left and a colon right .... Or just create a "Draggable Zone" on top and bottom of my html page ....

 

_larry_

Link to comment
Share on other sites

Hi Larry,

 

It sounds like a really cool use of Draggable.

 

Unfortunately I'm not sure if I understand correctly the issue you're having. It would be great if you could set up a reduced sample of your app in codepen or jsfiddle, that demonstrates the issue because is really hard to troubleshoot without looking at some code.

 

You can fork this codepen of the Greensock collection and add your code to it, it has draggable and ThrowProps plugin, so you don't have to add any script to it:

 

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

 

Also I've created an incredibly simple codepen based on what I understand of your post, you can also fork it and adapt it to show the issue you're having:

 

See the Pen hfIqF by rhernando (@rhernando) on CodePen

 

The ideal thing is to view it in full screen in your device:

See the Pen hfIqF by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo !

 

Well, I think you've post your reply 1seconde before I update mine ! , I've just updated it with an example on CodePen.

 

Thanks for the CodePen Template to , sure I'll use it if I encounter another problem's.

 

Just to re-explaine with my poor English : If you open my codePen on small screen and the View takes the whole screen, as the draggable instance is locked on the X Axis, there is no way to scroll up and down the html page, and I don't know how to find an alternative to this ? or maybe  the things I've wrote at the end of my updated post ....

 

Larry 

Link to comment
Share on other sites

Hi Larry,

 

Yep like Carl said hijacking the natural scroll of the browser could be very tricky, it'll break things up ultimately because at some point the scroll will be needed, unless you remove it from the scenario.

 

If you check my codepen you'll see that I set up all the overflows to hidden; set html and body height to 100% and created a main wrapper with width and height 100% and overflow hidden. Every content goes into that wrapper, then a draggable instance controls the scrollTop of that wrapper, while another draggable instance controls the x axis of the container that simulates your view.

 

Take a second look at it in a small screen and you'll catch the trick.

 

The beauty of it is that the two Draggable instances don't collide and work perfectly in harmony, just another sweet feature of GSAP.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Well, it seems to be exactly what I wanted to do ... Very very very cool , thank's a lot for your help ;)

I'll try to implement this on my codepen and re-publish it.

There is one thing I don't understand,  why all of your's wrapper have to be "overflow:hidden" ?

Don't you think that create a Draggable instance on the whole page (to get the scrollTop on it) , I mean the "wrapper" will cost a lot on the CPU ?

Larry

Link to comment
Share on other sites

Hi,

 

Actually scrolling the page up and down, whether the scroll bars are visible or not, is a complicated issue for a browser, due to repaints, style calculations and a lot of stuff that happens in that particular event. So having one DOM element containing every element shouldn't eat up more resources than usual on scroll, specially considering the fact that Draggable and the entire engine run on JS. If you consider that code execution rarely is responsible for performance issues, except when the code is not well written, then having Draggable controlling the element's scroll position does not consume more resources than usual.

 

I've tested the codepen sample in a low end android device with very good results. This is my tough test device, if things work well in this one they'll wok in every other device:

 

http://www.gsmarena.com/sony_xperia_tipo-4718.php

 

Rodrigo.

Link to comment
Share on other sites

That's a clear answer my friend, great ;)

 

Anyway I'll start to recode my site using you'r technique. Actually I'm doing test on a little WindowsPhone  Lumia 620, and perfs are not to bad. Thank's a lot one more Rodrigo, you'r the best !!!!

 

Larry

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.
×
×
  • Create New...