Sliders on Responsive Animation


#1

Here I go again with sliders on a responsive animation. I cannot get this slider to stay with the drag to save my life. Any help would be greatly appreciated.
http://www.kf-interactives.com/clabsi-cleaningSlider/
I put a keyframe at each green tick on the timeline. Didn’t work. I wanted it to “slot” into the green tick so I added two keyframes two spaces before and after the keyframe at the green tick. Now it really doesn’t work.
All transitions are set to Linear and the Speed is at 300%. I’ve tried many different settings on the Speed, 400% worked pretty well when it was two keyframes at the beginning and end, but now, can’t find the sweet spot since the transition lengths are different.
Any help is appreciated, I can send file as well. Thanks!


(Ken Heins) #2

I am definitely not an expert in sliders, but I am sure someone is. I am sure you will need to send file copy,

I dont see whats wrong with it, but I am not the designer :slight_smile:


#3

This drag issue is a well known problem with responsive set-ups in Hype. Why not change your approach?

I see no value in the drag interface for your project. You could simply have an animated click-based timeline (Step One, Two, etc.) that creates a more effective interface.


#4

Update: I just made it a straight timeline dragger, one keyframe at the front, one at the end. I would love a solution to this though, it would be so much nicer to have the slider slot into the Steps.
@JimScott, alas I have no choice in this, I try to discourage the sliders every time suggested the same thing, click based timeline, nope, they want it to drag…


#5

Rats!

Here is a thread that goes over this issue pretty thoroughly. You may find something useful here:


#6

Another go around - courtesy of @rene to which I have made some minor adjustments (runs a timeline).
I think this is an elegant solution in general - not sure if it will apply to your precise circumstances.
Unlike so many attempts for a fix to this issue, the Javascript is minimal.

Rene’s original thread:



My Demo here. Resize the window - this is a timeline drag - pretty clean!

My Demo Hype project: Drag_Sync.hype.zip (17.5 KB)