I'll try and keep it concise.
I am required to utilise the draggable plugin for GSAP in my project. The plugin is great and works really well. I think my issue is just something I'm not quite grasping.
Codepen:
https://codepen.io/mhcdotcom/pen/dzyNmB
Dragging the #stage element allows the click and drag functionality.
The .inner element extends out of the container div so I use overflow:hidden on the stage element.
When I do this, the portion of the .inner elements that extend past the viewable area don't come in to frame and seem to be cut off.
Is there a way around this in GSAP? What am I missing?
I have googled to no avail.
Any help is much appreciated.
Thank you
Moe
"All" draggable does is add a transition to the element that is dragging, so any overflows etc will still be honoured.
I can't be 100% sure what you are trying to achieve, but you can add classes on dragStart/dragEnd that means you should be able to get the behaviour you need.
I have forked a codepen giving you a basic example.
onDragStart: function() {
stage.classList.add('dragging');
},
onDragEnd: function() {
stage.classList.remove('dragging');
}
https://codepen.io/motionimaging/pen/xLxLpG
Related
I've made a CodePen showcasing a problem with the vertical functionality of the Slick Carousel. As you can see in the CodePen, I have three testimonials of different heights. When you scroll through them, you'll notice that the content gets cut off and does not display the copy correctly on screen.
Here's what I do to accomplish a vertical carousel using SlickJS:
$('.slick-carousel').slick({
vertical: true,
dots: true
})
Would there be a setting I'm missing in order for this to work?
I was doing a little digging around and I fell upon this post. I've tried it out on my CodePen above and it seems to be working fine.
If anyone has any better solution, do let me know in this thread!
I've been trying to accomplish this for like two weeks now. Does anyone here have any idea of how do this? I won't even paste my code because it's the worst ever.
Thanks.
Have you check fullpage.js?
You might be able to get the same scrolling effect by creating your own CSS3 function with the CSS Easing Animation Tool of Matthew Lein.
Then pass it to the parameter easingcss3 of fullPage.js.
easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',
Or, if you prefer, you can go for jQuery easing effects and use css3:false. (although it will be smoother with css3)
Regarding the elements dissappearing on scroll, you'll have to do it by yourself by animating them on a callback such as onLeave or by using the classes added to the body as in this example.
body.fp-viewing-page2-slide1 #section1 .moveOut{
transform: translate3d(0, -400px, 0);
}
Something in this line.
So, the new Exposure site is wonderful and got me wondering how they've achieved something like this. Basically, it's a cover image that's stretched to the browser window (even if you resize), what's lovely about is that only when you scroll do you get to see the content below.
I guess you could use something like backstretch.js for the dynamically-resized image. How are they achieving the rest, though?
I've set up a pen here: http://codepen.io/realph/pen/luwdJ
Which seems to do the job, but the content is being covered when you scroll rather than falling below the cover image.
Any idea what I'm doing wrong, or any tips for achieving something like this?
Thanks in advance!
I think this is what your looking for and css can do the whole thing
http://codepen.io/anon/pen/rajDJ
Just add this rule to your images or image class
img {
width: 100%;
}
What exposure is doing there is creating onclick modal window that contains the image but you can do that with js or jquery or there are many jquery plugins that do that.
Also to get the nice grid structure you can use a grid template. Here is one to get you started http://960.gs/
So i am trying to create a stage where i can have multiple items on it that are draggable.. but when the stage is clicked and dragged all the elements move with it.
So far I can only get one or the other to work by adding the 'draggable' property to either.
Has anyone got a solution for how to get this working?
Here is the JSfiddle http://jsfiddle.net/KHVhU/
I have considered the possibility that I might need to make the containing div draggable using jquery-ui instead of trying to do the whole thing inside the canvas, but ideally wouldnt want to take this route
the correct kineticJs library was not included. Use the correct KineticJs below.
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js
Now, each individual items will be draggable even with stage.
found the solution with the help of the setDraggable() function
Updated the JSFiddle here: http://jsfiddle.net/KHVhU/1/ :)
How do I make elements draggable between two divs? This seems to be something that draggables should do. But I haven't been able with the code I have. In this jsfiddle I have two divs with draggable elements. I want to get one element to go from the first div to the second div. That functionality must exist on many web sites.
Here is the jsfiddle with the code.
http://jsfiddle.net/gkvgn/9/
I have asked before and thought that someone would know how to have that functionality. If the code I have isn't the right way, how do I define an element and the draggable containment option to be able to have that functionality.
There's a similar Stack Overflow question that was answered here:
jquery ui draggable elements not 'draggable' outside of scrolling div
I implemented the above solution on my own project and it worked beautifully.
I agree that it does seem like if you set the containment to window or document, cross-div dragging should be allowed. I imagine that you'd prefer overflow to stay hidden due to the amount of content you want to keep in your divs.
Finally found the problem. Specifying overflow: hidden; for the container div restricts the draggable area to the container only. If I remove that specification from the styles. The elements are draggable across the divs. Here is the fiddle with the fix.
http://jsfiddle.net/gkvgn/10/
I could drag draggables from a scrollable div into a different non-parent when I stopped trying to use jquery. I ended up using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations