Jump to content
Search Community

Simulating Drag on Event.

Victor Work 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 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

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

  • 1 year later...
On 12/17/2018 at 5:28 AM, OSUblake said:

You can use move stuff like this.

 

 

Sorry to bring up an old thread but I'm wondering if this is also possible when mousewheeling both X and Y (so it would move you left/right accordingly) for example on a MagicMouse or similar?

Link to comment
Share on other sites

18 minutes ago, aok said:

Sorry to bring up an old thread but I'm wondering if this is also possible when mousewheeling both X and Y (so it would move you left/right accordingly) for example on a MagicMouse or similar?

Sure, you'd need to adjust the mouse wheel listener to watch for e.deltaX like how e.deltaY is being watched.

  • Like 1
Link to comment
Share on other sites

23 minutes ago, ZachSaucier said:

Sure, you'd need to adjust the mouse wheel listener to watch for e.deltaX like how e.deltaY is being watched.

Thanks for the reply!

I did try this but it seems to go diagonal on scroll rather than left/right or up/down (which I think has to do with the `normalized` var as it's controlling both).

 

As this doesn't necessary use gsap; do you know if there's a demo/example of using mousewheel to translate and zoom?

 

Link to comment
Share on other sites

27 minutes ago, aok said:

do you know if there's a demo/example of using mousewheel to translate and zoom?

The mouse wheel event gives you both the scroll position and the delta. They're just variables. Use whatever you'd like and hook it up to whatever you want to translate or zoom. There are lots of examples out there :) 

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