Drag element, interact with another element

[erayner_45092 21 Likes (Newbie)]

Hi there,

 

My company recently has me working with a software called 'Webflow'. I figured out how to integrate greensock on webflow. 

here is my code

<script>

  //draggable content
  Draggable.create("#DraggingArrow", {type:"x,y", edgeResistance:0.65, bounds:".slider-bar", throwProps:false});

</script>

 

Now my question is, how do I go about telling greensock, or the browser, that once #DraggingArrow is at say.. 50% of .slider-bar, do this?

See attached screenshot for what I am trying to make

 

 

Thanks in advance!

[PointC 8,599 Likes (Superhero)]

Hi @erayner_45092

 

If I understand your question correctly, you'd want to use an onDrag callback. Just add some logic for when it reaches a certain point. Here's a basic example I made for another forum post, but I think it may help:

 

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

More info about available callbacks in the draggable docs:

https://greensock.com/docs/Utilities/Draggable

 

Happy tweening.

[erayner_45092 21 Likes (Newbie)]

Hi PointC,

 

Thanks for your quick response.

This works really well. Thank you!

 

Could you please explain this? {x:this.x/2+"%"} It's a calculation I can't figure out.

 

Also, is there a property I can use that will 'snap to' a container on release?

I can use 

onDragEnd:function() {
		console.log("drag ended");
	}

But then how do I go about telling it that I want one of the children of the element that is sliding to 'snap to' a mask?

 

Thanks!

[PointC 8,599 Likes (Superhero)]

That is just the calculation for my demo pie chart. The dragger can move 200 pixels so I just divide the x position by 2 to convert for the percentage complete of the pie chart using drawSVG. 

 

I'm not sure I completely understand the 'snap to a container' part of your question, but you can use snapping with draggable. The draggable demo page has nice examples of that feature with a toggle so you can see what's happening in the code.

https://greensock.com/draggable

 

Children of the element snap to a mask? Sorry, you lost me on that one. Could you explain a bit more about that?

 

Thanks.

 

[erayner_45092 21 Likes (Newbie)]

Sorry, that must be confusing. I can barely explain myself sorry!

 

I've made a codepen.

See the Pen VzMEQw by erayner (@erayner) on CodePen

 

best to open on desktop because no media queries

 

Essentially, I want to have the videos outside of the mask to be invisible until they are dragged into the mask. The mask is the square with the red border. and if one of the elements is half way in, then it needs to snap to the mask.

 

Any help greatly appreciated.

 

Cheers

 

[PointC 8,599 Likes (Superhero)]

o.k. - I think I understand what you're trying to make happen. 

 

Here's a basic example of a draggable controlling some slides. I've set up an array for the throwProps snap so if you stop between two, it will move to the closest marker. For the 'invisible' part, I just wrapped the panels in a div and set the overflow to hidden.

 

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

I have several hard coded values in this demo as I really didn't know if you had a fixed size or number of videos, but you should be able to adapt it to your needs with some loops and variables. Hopefully this is what you needed. Happy tweening.

 

[erayner_45092 21 Likes (Newbie)]

dude you're awesome. Thanks a lot for this! I appreciate your help. Thanks again

[erayner_45092 21 Likes (Newbie)]

Thought i'd show the Landing page, thanks again for your help!

http://storylab-lp.webflow.io/#section3

[PointC 8,599 Likes (Superhero)]

You're welcome.

 

The video slider page looks good - it's nice to see the final result of a forum question. Thanks for sharing. 

 

Happy tweening.

[erayner_45092 21 Likes (Newbie)]

Hi Craig,

 

Sorry for activating this topic again,

 

I was wondering if you could tell me how I can edit the codepen above to display 13 objects instead of 4?

I've been trying to make it work, but with no luck.

 

Thanks!

[PointC 8,599 Likes (Superhero)]

Hi  - sorry for the delay - I was wrapped up in another project.

 

I made a new fork of the pen that allows you to change the number of panels. A couple things of note: the stage in my demo is 600px wide and the dragger travels 300px so some of the math is based on that. I put some comments in the JS so you can see where those may need to be changed for your project. You could also make those widths into variables and plug them into the Math, but that's up to you. Here's the new fork:

 

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

Hopefully that helps. Happy tweening.

 

[erayner_45092 21 Likes (Newbie)]

Hey PointC,

 

Thanks a lot for your help!

A true javascript pro at work. Ill be holding onto this and studying it.

 

Cheers!

Eugene