Jump to content
GreenSock

tusha3

Draggable on mouseover? Is it possible?

Recommended Posts

Hi everyone,

 

I'm new to GSAP / Draggable libraries, and I would be very happy to get help from the experts... (: so thanks ahead for anyone who will try to help - I really appriciate it!

 

So here my problem:

 

I want to get a SVG image to act exactly like a draggable element, except for one change:

 

I want the dragging event to fire on mouse hover event, instead of a typical dragging event (mouse pressed while moving).

 

Is there any way to get this done using the Draggable library?

 

A solution I thought of is to trigger a press down event right after the hover event, what do you think? can something like this actually work?

 

Thanks,

Neta

Link to comment
Share on other sites

Hi tusha3 :)

 

Welcome to the GreenSock forum.

 

If I understand your question correctly, you want to start dragging an element simply by hovering over it? I don't think Draggable would be the best choice for that. You'd probably have to set up a function that listens for a hover and then link the mouse position to the elements position. My questions would be how do you stop dragging? A click? How would you handle dragging on mobile devices with no hover events? What if someone accidentally hovers and starts dragging the element? Just my two cents worth, but that would feel counter-intuitive to me.

 

Good luck and happy tweening.

:) 

  • Like 3
Link to comment
Share on other sites

Thanks @pointC!

 

I'll try to build a custom function as you suggested.

I hope I'll be able to use GSAP somehow to make the movement smoother.

Also, I want to trigger some other tweens (tween the element itself and another element)  after the element is moved to a certain position... I guess that also in this case a custom code will be the way to go?

 

As for all the questions you came up with, I have already took those into consideration.

 

When I'll figure how to do all these stuff, I'll upload the code to codepen...

 

Neta

Link to comment
Share on other sites

  • 1 year later...

I am trying to bind hover to draggable, as in wherever the mouse is, it is the same as being dragged. The problem is that draggable works perfectly for mobile touch, but the experience is not good on desktop where a hover would be the expected behavior.

 

Is there a simple way to bind the two?

 

What I am trying to do is make scrubbing a spritesheet interactive. The user would not intuitively know to click and drag, so it must be hover. 

 

This thread explores the hover aspect of it:

 

 

Link to comment
Share on other sites

Thanks!

After playing around, I've had some luck with the hover and got close to the behavior I want. 

Alas, there is always another issue to debug. I'm trying to think of the best strategy for "ping ponging" between the ends of the spritesheet. When you go far enough, it resets to 1 and jumps. This would be ideal with a perfect loop, but not with this.

I will have to think about strategies. You could check the range, but browser widths will differ. Maybe a percentage based range would be best. Hopefully I can find a similar project as I learn the draggable.js library. :-)

 

Edit: You must open in codepen itself for the hover to work.

 

See the Pen NLNBjK by bugszomfg (@bugszomfg) on CodePen

 

Link to comment
Share on other sites

You don't need to append your proxy element 'spriteslider' in the DOM. It can work without appending.

 

Solution for your problem is pretty simple, create a tween with stepped ease that will animate through your spritesheet. While dragging set your tween's progress as draggable.x/containerWidth. On mouseleave you can reset the progress and on resize you can recalculate the containerWidth and reset everything back to zero.

 

The main problem with your implementation was you were using mouseenter on 'spritetarget' and mouseleave on container. I had hard time editing it, I was going to give up but here it is.

 

See the Pen NLNOxM?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Sweet. Now I just need to keep the state of the frame when it leaves the area. I will fix after playing with it and update this post for anyone trying to do it in the future. 

I'm an Adobe Edge Animate refugee. I like this better, but it's a steep learning curve.  :-)

  • Like 2
Link to comment
Share on other sites

Quote

I'm an Adobe Edge Animate refugee. I like this better, but it's a steep learning curve.  :-)

 

Ya it would be steep but if you spend some time around forum looking at questions even though they are not related to you, you will learn a lot.

 

I gave it another try and I think this is what you are trying to do. Some of the things I would like to point out,

 

1. You are using files with 'latest' links but those files are 3-4 year old, latest version is 2.0.2.

2. The way you had written your code works but it is incorrect because spriteslider is your proxy element. So you shouldn't assign your actual elements as properties to it.

3. GSAP 2.0.2 was released yesterday with a new callback called onPressInit which lets you adjust your element before Draggable records your values, so I am using it to reposition the proxy element.

 

See the Pen mGPzGX by Sahil89 (@Sahil89) on CodePen

 

But in above demo you will notice jumps when you mouse over at random position. You can animate to that position by using manual easing, it is little bit advanced but just basic Maths. Here instead of directly applying calculated progress, I am using another variable called spriteProgress. Then on every frame I am using that value to ease the tween for smoother effect.

 

See the Pen eLZQjW by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Quote

3. GSAP 2.0.2 was released yesterday with a new callback called onPressInit which lets you adjust your element before Draggable records your values, so I am using it to reposition the proxy element.

 

Good timing then I guess. :-)  I am looking through the release logs now and seeing what has changed since I gave up on Edge Animate two years ago and looked into GSAP. I woke up with an idea for better UX for this type of artwork when scrubbing through the frames in Luma Fusion on my iPad. My wife illustrates a lot of lenticular layered works that can be made like this in 3DMasterKit (or After Effects).  It's pretty dizzying for some people to see the ping pong gif, and I think it works better when someone can control the view.

 

Quote

Here instead of directly applying calculated progress, I am using another variable called spriteProgress. Then on every frame I am using that value to ease the tween for smoother effect.


That's what I had in mind, but couldn't find it. You just saved me a week messing about sub-optimally in jQuery. Cheers!

 

 I'm going to explore the best UX for mobile and desktop for these 3D illustrations now while I learn. I found only one site doing something similar for video frames, but it is closed source (well obfuscated JS): http://gifctrl.com/?q=yunggif.tumblr.com I think it is very cool for looped gifs and I'm surprised it's not the standard for image sites or reddit.

 

Link to comment
Share on other sites

I've kind of hit a wall trying to get the UX I want out of mobile. The touch is a bit too slow and I want to decrease the resolution by forcing a new frame ever 45 pixel like on the first example. Should I be using timelineMax instead? Can you combine the tweenMax and timelineMax libraries?

I couldn't find an easy way to speed up the scrubbing. I added a test button to toggle the playback with a yoyo (what I meant when I said ping pong), and it is way too fast. I would like it to go at 10-15fps, as not to make people dizzy. :-)

 

I really am in love with the custom easing features. It's something so many NLEs and GUI programs ignore. Even in AE it is onerous as you have to guess and check with JS to see if you get the behavior you want. I love that little easing applet: https://greensock.com/docs/Easing
 

See the Pen aaZwom by bugszomfg (@bugszomfg) on CodePen

 

Link to comment
Share on other sites

Not sure what you mean, the effect is based on width of the spriteslider so you can't really change the distance after which frame will change. You can easily add longer animation with far more frames and it will perform same. You can even use video with same logic.

 

The speed of your 'tween' can be 10 seconds or 1 second, it won't affect the mouse interaction. You just need to pause your tween when draggable interaction starts.

  • Like 2
Link to comment
Share on other sites

I just figured it out at 2am, and I read through all the docs trying to solve it. I was defining the sprite sheet as one frame too long. It's weird, but you have to subtract one frame from the spritesheet size, at least for the solutions I found for the SteppedEase property. I know you put that in your solution, but I didn't understand why at first. I had all sorts of problems for this reason, but now I understand how everything works!

Figuring it out involved numbering the frames, and console logging the math. :-)

 

Edit: If you change the spritesheet size to 9930 (actual), you get the odd things happening, including the frames going 123321312 (jumping) unexpectedly. I also confused the processes of the drag and main tween the play toggle was using.
 

See the Pen bxermq by bugszomfg (@bugszomfg) on CodePen

 

Link to comment
Share on other sites

Sprite sheets are like that. Say you have a 3 frame sprite sheet and you're showing frame 1 on page load. You want to step to frame 3 so how many steps do you need to take? Not three. Just two will get you there. If you take three, you'll be off the end of the image. 

 

Does that make sense?

 

Happy tweening.

:)

 

 

 

  • Like 2
Link to comment
Share on other sites

No, not from a css or after effect sense! It does from an programming sense where [0] is the first in an array. I suppose it is in fact a form of an array defined first by the parameters of the spritesheet. It took me visually doing it with no overflow to get it. :-)

Link to comment
Share on other sites

Yay, I finally got the behavior I wanted finally on touch and mobile! 

 

The only issue is that when you enter the the image, it jumps to the position of your cursor (or finger touch coordinate) instead of starting from the last frame shown as the start epoch. That may require a strategy similar to Sahil's. The problem I faced with his solution is that when combining autoplay and draggable functionalities, they interfered with each other. I'm just a n00b, so it is probably down to my problem solving ability in JS.

 

See the Pen bxermq?editors=0010 by bugszomfg (@bugszomfg) on CodePen

 

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.
×