Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Simulating Drag on Event.

Recommended Posts

Hello friends,
I would like to know if there is a way to simulate the Drag on event using Draggable.
I need to activate MouseWheel down to simulate drag to the left,
and when activating MouseWheel up simulate the drag to the right.

See the Pen ebzdEL by Noturnoo (@Noturnoo) on CodePen

Link to comment
Share on other sites

Hello Blake,
How are you?
First of all thanks for the demo,
but I really need something that simulates the drag of draggable
to be able to trigger on a gift event, as does the jQuery .trigger(). 
 

$el.mouseenter(function(){
	this.trigger('Dragabble','left');
})


Is there a way?

Link to comment
Share on other sites

You can trigger events, but dragging won't work correctly if a user isn't pressing down.

 

Draggable is just translating an element, which is what my demo is doing. If you're trying to do wheel scrolling and dragging on the same elements, it's going to require a little work.

 

Can you make a simple demo showing what you're trying to do?

  • Like 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

Draggable is just translating an element, which is what my demo is doing. If you're trying to do wheel scrolling and dragging on the same elements, it's going to require a little work.

This is exactly what I would like to do, synchronize an event (can be the MouseWheel) with Draggable.

 

I do not know how I could do this, but there is a website (https://www.brontidebg.com/) that has a very similar effect to what I want to do.
Note that page navigation happens with Scroll and Drag.

I do not know how far this is feasible or possible, but I think it would be a good feature for Draggable

Link to comment
Share on other sites

You can use a proxy element for dragging, and then update the progress value of an animation. See how this demo works.

 

See the Pen veyxyQ by osublake (@osublake) on CodePen

 

 

You can use wheel events to update the progress of an animation just like dragging the proxy does.

 

  • Like 3
Link to comment
Share on other sites

Blake, I confess that I'm analyzing your pen for about 20 minutes and
I came to the conclusion that: Either I'm very new to JavaScript or you're very advanced ...
But I think it's both options, lol. hahaha
Could you make a simplified version with proxy and update progress animation using this pen I did?
I would be very grateful, because this your slider pen is God level.
 

See the Pen ebzdEL by Noturnoo (@Noturnoo) on CodePen



 

Link to comment
Share on other sites

2 hours ago, Noturnoo said:

Blake, I confess that I'm analyzing your pen for about 20 minutes and
I came to the conclusion that: Either I'm very new to JavaScript or you're very advanced ...

 

One thing I would recommend - Don't use jQuery. It's hard to learn advanced JavaScript when you're doing everything through jQuery because it hides a lot of the inner workings.

 

2 hours ago, Noturnoo said:

Could you make a simplified version with proxy and update progress animation using this pen I did?

 

Let's start out small. Here's a pen from @PointC. Notice how he uses draggable to update an animation.

 

See the Pen aaXXwP by PointC (@PointC) on CodePen

 

 

That's the theory of using a proxy, so let's expand on that. Now dragging and wheel events will update the animation.

 

See the Pen pqbQrg by osublake (@osublake) on CodePen

 

 

 

 

  • Like 3
Link to comment
Share on other sites

You're completely correct Blake,
I need to study the vanilla and so increase my level in javascript.
I'm going to be a fan of your recommendation, and
I'm going to study those thoughts that you sent me,

I'll soon be back on the topic with a demonstration that will make you proud. ?

  • Like 2
Link to comment
Share on other sites

Hi @Noturnoo :)

 

That site to which you linked reminded me a of a slider I posted a few weeks ago. Maybe it can help.

 

 

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

I added drag & throw, nav dot, arrow and mousewheel controls. I think it has most of the behavior you're looking to achieve. I linked the draggable to the time() of the nav dot and slide title animation timeline on the bottom of the screen. That website slider has more fluid movement than mine, but you can certainly add all that. My slider doesn't loop because we use this for sales presentations and storytelling and the last panel is always a call to action. I notice that slider on that website doesn't loop either so maybe that's what you need.

 

Hopefully that helps a bit. Happy tweening.

:)

 

  

  • Like 3
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.
×