Jump to content
Search Community

Drag element, interact with another element

Eugene Rayner 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

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!

Screen Shot 2017-08-14 at 5.01.38 pm.png

Link to comment
Share on other sites

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.

:)

  • Like 6
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

:)

 

  • Like 6
Link to comment
Share on other sites

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.

:)

 

  • Like 4
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...