[staggerTo with variable end points?]

Thanks Carl - will look into it.

[staggerTo with variable end points?]

Hey guys,

 

I'm trying to animate an array of objects along a path using staggerTo and bezierThrough and I'd like each object to have a unique destination.

 

Is there an easy way to plug in the last x,y coordinates on a per object basis while using staggerTo?

[Lock axis across different Draggable instances]

Thanks again @AncientWarrior

 

These links are super helpful.

 

The final piece of the puzzle for me is to figure out how to achieve the same functionality for scrolling(trackpad on laptop or mouse wheel) like in the codepen you provided above.

 

For instance, if a user starts to scroll down the page vertically, the horizontal strips would lock. Conversely, if a user were to start scrolling one of the horizontal strips then the vertical scroll would lock. Just to clarify, when I say "scroll" I mean desktop scroll via either a mouse or trackpad.

 

Currently the dragging functionality is exactly what I need, however I can't get it to work for scrolling.

[Lock axis across different Draggable instances]

@AncientWarrior - wow, this is awesome. Very clever!

 

If I understand this correctly, the crux of what's happening is that the edge resistance value is being toggled via user mouse events like mouse down etc?

 

Could the same concept work for scrolling? Like using Jquery to listen to a scroll event and then toggle the edge resistance?

 

Thanks for the amazing codepen, and for the time!

[Lock axis across different Draggable instances]

Hey guys,

 

First off let me start out by saying how great this product is, really impressive and loads of fun to use.

 

I came across an interesting challenge today. I am trying to figure out how to temporarily disable the dragging or scrolling of one Draggable instance when a separate Draggable instance is being dragged or scrolled. If you're thinking, why on earth would you want to do that? I'll explain.

 

I have one div(the parent div) that is only responsible for vertical dragging/scrolling. Inside of that parent div I have child divs that act almost like film strips that require only horizontal dragging/scrolling. What I was hoping to achieve is similar to the "lock axis" feature currently available for the same Draggable instance. Otherwise it's very wonky to drag/scroll when multiple axis are moving around simultaneously.

 

I set up a simple code pen for anyone who is brave enough to humor my ridiculous request 

 

Any guidance would be most appreciated.

See the Pen einqz by anon (@anon) on CodePen

[Draggable: Proper way to tween a div that is being dragged]

Thanks Carl!

 

Exactly what I was looking for. Appreciate the swift response.

[Draggable: Proper way to tween a div that is being dragged]

Hey guys,

 

Was wondering how to best approach tweening a div that has a Draggable function associated with it, so that it does not mess up any of the values that is being calculated for dragging/scrolling etc.

 

Let's say I wanted to anchor to a particular section automatically by using tweenmax but also wanted to preserve the Draggable features like grabbing and scrolling.

 

More specifically, how would I tween the div with class"box" in the code pen?

 

Any help would be greatly appreciated.

 

Thanks! 

See the Pen GHtaK by anon (@anon) on CodePen

[Video inside Draggable container not playing]

Hey guys,

 

Thank you for all your help, I finally figured it out! The problem was not related to div wrapping or overflow issues, the issue was on the javascript side.

 

I was calling the play() function before the draggable.create() which caused the issue, see below:

brandVid = document.getElementById('brandVid');
brandVid.play();

Draggable.create("#columnsParent", 
{
type:"scrollLeft" ,
bounds:"#columnsParent", 
edgeResistance:0.5, 
throwProps:true,
throwResistance:1500,
onDragStart:function() 
{  
//trace('dragging');
CANVAS.dragging = true;
},
onClick:function() 
{  
//trace('Not dragging');
CANVAS.dragging = false;
}

});

When I switched the order and called play() after the draggable.create() it worked! :

Draggable.create("#columnsParent", 
{
type:"scrollLeft" ,
bounds:"#columnsParent", 
edgeResistance:0.5, 
throwProps:true,
throwResistance:1500,
onDragStart:function() 
{  
//trace('dragging');
CANVAS.dragging = true;
},
onClick:function() 
{  
//trace('Not dragging');
CANVAS.dragging = false;
}

});

brandVid = document.getElementById('brandVid');
brandVid.play();

Thanks for your patience, hopefully this thread will help others who encounter the same issue – or maybe this was just a rookie mistake on my part   

[Video inside Draggable container not playing]

 

Hi,

 

Great job Jonathan, excellent codepen!!!

 

The issue here is that the video tag probably doesn't have an overflow property, so there's nothing to scroll in the <video> tag. Keep in mind that when you set up a scroll type Draggable on an element, the child nodes of that element will be scrolled up/down, left/right, not the element. So what you have to do is apply the Draggable instance to the video tag parent element instead:

Draggable.create("#wrapper", {
   type:"scrollLeft",
	   bounds:"#wrapper",
	   edgeResistance:0.5
});

Thanks Rodrigo,

 

To clarify, I applied the Draggable to a parent div. Draggable type: "x,y" works fine. But type: "scrollLeft" does not. I think it has something to do with a tag that is automatically generated that reads:

 

<div style="display: inline-block; width: 100%; padding-right: 0px; position: relative; overflow: visible; transform: translate3d(0px, 0px, 0px);">

[Video inside Draggable container not playing]

What browser and OS are you testing on?

 

I got it to still play the video while using scrollLeft by wrapping the video tag in a div tag. Now it plays the video while dragging scrollLeft.

 

See the Pen Bxkrz by jonathan (@jonathan) on CodePen

 

Does that help? If not .. maybe some of the other great Greensockers here can chime in with a better solution!

Thanks Jonathan, but no luck yet.

 

One key consideration though, is that using type:"scrollLeft" seems to automatically generate a "wrapper" tag that reads as follows:

 

<div style="display: inline-block; width: 100%; padding-right: 0px; position: relative; overflow: visible; transform: translate3d(0px, 0px, 0px);">

 

While other drag types like "x,y" do not generate a wrapper tag by default. 

 

Please note that this tag does not show up on codepen but does in the browser. 

 

I believe this is where the issue lies. Can you explain what that tag does?

[Video inside Draggable container not playing]

You wouldn't need all the code in your project in the codepen.. just a simple example showing the behavior described. You could just create a limited codepen example with just your html5 video tag and Draggable. This way we would just focus on the video with Draggable applied to it.

 

Here is a codepen example of Draggable working on a HTML5 video tag:

 

See the Pen xeatn by jonathan (@jonathan) on CodePen

 

And as you can see, you can drag the video tag... even while playing.

 

I tested this in Firefox 31 and 32.. also in Chrome Version 37.0.2062.103 m .. on Windows 7 (64-bit)

 

Thanks for the codepen example!

 

When I change the scroll type from "x,y" to "scrollLeft" I get the same problem I'm having. The video just doesn't play. Please check the link below.

 

See the Pen hIDvL by anon (@anon) on CodePen

[Video inside Draggable container not playing]

Hello tauab, and welcome to the GreenSock Forum!

 

Without seeing a live code example it will be hard to know what is happening. If you can provide a limited reduced codepen example we can better help you! Here is a nice video tut by GreenSock on How to create a codepen demo example!

• Is your video youtube or vimeo embedded Iframes?
• Or is this a HTML5 video tag your using?

But that being said..

 

I have experienced this before. The only thing i can think of without seeing this live in the browser..  is that sometimes the transforms applied to an iframe that pulls video (youtube or vimeo) or its parent that is transformed, will need to have its transform zeroed out. Meaning you might have to either make your x, y,  z, scale, rotation, etc.. have a value of ZERO.. or remove the transform completely from the inline styles on the element.

 

It can also be a matter of other CSS properties you might have to modify on the video itself or on the videos parent.

 

The best way to find out, is if you can provide a codepen demo... this way we can test you code in a live editable environment to better see the issue.

 

Thank You

Hey Jonathan,

 

Thanks for the swift reply! Unfortunately sharing the code on code pen is not an option as the content on the site is not to be disclosed before launch. If we cannot trouble shoot this "in the dark" so to speak, I can create a simplified version with alternate content which will take some time so I'm hoping the former will shake out.

 

To answer your question above: I am using an html 5 video tag. When I comment out the draggable constructor the video plays fine.

[Video inside Draggable container not playing]

Hello!

 

I applied GSAP draggable to a container that houses a grid of images and videos. The dragging and throwProps works beautifully, the only issue I'm having is that the videos inside the div do not play. Sometimes the first frame will appear but that's about it. I ran some tests and found that videos outside of the draggable div would play, but the ones nested do not.

 

Any ideas? 

 

Below is the draggable set up I'm using:

 

Draggable.create("#columnsParent", 

{

type:"scrollLeft" , 

edgeResistance:0.5, 

throwProps:true,

throwResistance:1500,

onDragStart:function() 

{  

//trace('dragging');

CANVAS.dragging = true;

},

onClick:function() 

{  

//trace('Not dragging');

CANVAS.dragging = false;

}

 

});

 

Thanks for the time,

 

-Taua