Creating a scrollable area

scrolling

(kara l) #1

Hi, I’m trying to figure out Hype after a long hiatus… I’m trying to create a simple scrollbar with the area on the left scrolling up/down when the user drags the scrollbar up/down. I also wanted try to hide the stuff inside the ‘module’, but instead just overlayed images. I used the ‘ydraggable’ but it starts up on load, and I want the user to control the scrolling?

scrollTest.hype.zip (128.0 KB)

Thanks!


(Greg) #2

You have the scroll Timeline action on the “Main Timeline” which is causing it start on Scene Load, try creating a new Timeline just for the scroll action.

Also, you don’t have jQuery loaded in the resources pane.


(ilkka_kumpunen) #3

I recommen not to use symbol there at all. Jus animate content first, make neccessary timeline and group the content which needs to be only partly visible. Metrics > content overflow > hidden, and whoops, everything overlapping the group area is disappeared.
Then create the scrollbar timeline together with content timeline so, that they are precise as long.
In scene screen “on drag > control timeline” you need to choose scrollbars timeline.
Thats all. No javascript, no symbols.


(kara l) #4

Thanks! Haven’t used jquery with hype, so need to figure it out more.


(kara l) #5

Many Thanks! I should be able to figure this out with help from both.


(kara l) #6

I feel like there should be an easy solution to this. I’ve put the scroll action on a separate timeline. How do you suggest a better ‘scroll’ interaction? I’ve got the ydraggle as jquery, it’s still not right?

scrollTest.hype.zip (147.1 KB)

Thanks for your help!!


(kara l) #7

Ok, I figured it out (barely). Would like to get it working with a mouse scroll, but I’ll do some research. thanks


(ilkka_kumpunen) #8

Sorry this late answer, but look at this attachment. Is this the functionality you are looking for?
(Removed due to incompatibility with public version of Hype --@daniel)


(Danny) #9

Hello ilkka, I’d be very interested in how this works. I downloaded the file you’ve provided. Unfortunately, I can’t open it even though I’m running the latest version of Hype (Hype 3 3.0.3). If you’ve a minute, I’d love to learn what I could from your example. All the best, Dan


(ilkka_kumpunen) #10

(Removed due to incompatibility with public version of Hype --@daniel)

I noticed i need to pack the example file before sending, even this mailing protocol claims it’s packing it. I guess it should be working now.


(Hans-Gerd Claßen) #11

hi @ilkka_kumpunen,

wheelscroll-control works nice except Safari Version 9.0 (11601.1.56).
can’t test older safaris …


(Danny) #12

Hey again ilkka,
Thanks for the reply, please excuse my own delayed response…I downloaded the file from your latest link. I’m still getting the same message. I’m going to contact some admins, maybe they could propose a solution…


#13

Hi @kara – Please try this:

scrollTest.hype.zip (151.3 KB)

For the scrollbar element, I’m using these settings:

I also lengthened the animation so that it matches up with the drag movement.

@dannyC Please try the link above.


(Danny) #14

You are quick, thank you Daniel.