Jump to content
Search Community

Problem in Image slider using greensock draggable and throwprops

s surya kumar 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 s surya kumar, and welcome to the GreenSock Forum!

 

Have you looked at using the liveSnap parameter? You could use it along with snap to control how much the element moves on each drag snap.

 

GreenSock Draggable Demo Example: http://www.greensock.com/draggable/

 

In the example link above .. check the liveSnap checkbox

  • liveSnap : Function | Boolean | Array - allows you to define rules that get applied WHILE the element is being dragged (whereas regular snap affects only the end value(s), where the element lands after the drag is released). For example, maybe you want the rotation to snap to 10-degree increments while dragging or you want the x and y values to snap to a grid (whichever cell is closest). You can define the liveSnap in any of the following ways:
    • as a function - this function will be passed one numeric parameter, the natural (unaltered) value. The function must return whatever the new value should be (you run whatever logic you want inside your function and spit back the value). For example, to make the value snap to the closest increment of 50, you'd do liveSnap:function(endValue) { return Math.round(endValue / 50) * 50; }
    • as an array - if you use an array of values, Draggable will loop through the array and find the closest number (as long as it's not outside any bounds you defined). For example, to have it choose the closest number from 10, 50, 200, and 450, you'd do liveSnap:[10,50,200,450]
    • as an object - if you'd like to use different logic for each property, like if type is "x,y" and you'd like to have the "x" part snap to one set of values, and the "y" part snap to a different set of values, you can use an object that has matching properties, like: liveSnap:{x:[5,20,80,400], y:[10,60,80,500]} or if type is "top,left" and you want to use a different function for each, you'd do liveSnap:{top:function(endValue) { return Math.round(endValue / 50) * 50; }, left:function(endValue) { return Math.round(endValue / 100) * 100; }}
    • as a boolean (true) - live snapping will use whatever is defined for the snap (so that instead of only applying to the end value(s), it will apply it "live" while dragging too)
var gridWidth = 200;
var gridHeight = 100;
Draggable.create(".box", {
    type:"x,y",
    edgeResistance:0.65,
    bounds:"#container",
    throwProps:true,
    liveSnap:true,
    snap: {
        x: function(endValue) {
            return Math.round(endValue / gridWidth) * gridWidth;
        },
        y: function(endValue) {
            return Math.round(endValue / gridHeight) * gridHeight;
        }
    }
});

You will notice ThrowPropsPlugin snap parameter being used in the GreenSock Draggable demo :

  • snap : Function | Object | Array - allows you to define rules for where the element can land after it gets released. For example, maybe you want the rotation to always end at a 90-degree increment or you want the x and y values to be exactly on a grid (whichever cell is closest to the natural landing spot) or maybe you want it to land on a very specific value. You can define the snap in any of the following ways:
    • as a function - this function will be passed one numeric parameter, the natural ending value. The function must return whatever the new ending value should be (you run whatever logic you want inside the function and spit back the value). For example, to make the value snap to the closest increment of 50, you'd do snap:function(endValue) { return Math.round(endValue / 50) * 50; }
    • as an array - if you use an array of values, ThrowPropsPlugin will first plot the natural landing position and then loop through the array and find the closest number (as long as it's not outside any bounds you defined). For example, to have it choose the closest number from 10, 50, 200, and 450, you'd do snap:[10,50,200,450]
    • as an object - if you'd like to use different logic for each property, like if type is "x,y" and you'd like to have the "x" part snap to one set of values, and the "y" part snap to a different set of values, you can use an object that has matching properties, like: snap:{x:[5,20,80,400], y:[10,60,80,500]} or if type is "top,left" and you want to use a different function for each, you'd do snap:{top:function(endValue) { return Math.round(endValue / 50) * 50; }, left:function(endValue) { return Math.round(endValue / 100) * 100; }}

Does that help? If not, can you please provide a codepen example so we can see your code in context to better help you?

 

Here is a nice video tut by GreenSock on How to create a codepen demo example.

 

:)

  • Like 2
Link to comment
Share on other sites

Hi,

 

To complete Jonathan's advice please check the following links.

 

This post is regarding a similar scenario:

 

http://forums.greensock.com/topic/8349-get-throwprops-end-value-before-snap-triggers/

 

And this codepen Jamie made in order to solve the issue:

 

See the Pen FnKba?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

 

Finally you can see a sort of application of Jamie's code here:

 

See the Pen pzIgJ by rhernando (@rhernando) on CodePen

 

Regarding this specific post:

 

http://forums.greensock.com/topic/8338-swipe-comic-pages-startstop-animation-if-slidepage-is-visible/

 

Feel free to fork and adapt the pens to meet your needs.

 

Rodrigo.

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