OrganicPixels

This is most likely due to the scope of your js. Ideally I'd create it in a constructor function but you may have an "out of the box" solution like the one Blake demonstrated depending on your SPA framework.

Guys, Thanks so much for all the feedback. I think Blake may have the solution but if not the MutationObserver looks very promising. Thank you all so much for the guidance!

Hi everyone, Not necessarily having a problem with code to fix but need suggestions on how to approach an issue. I'm working in a mobile application that's running Knockout to create a SPA. I'd like to use draggable to handle the mobile support of dragging since it does so well. However, the nature of my problem is dom injection. Draggable looks for an element selector on page load to create it's logic. However in the SPA architecture elements are dynamically added and removed to the dom based on user interaction. I'm trying to find a way that I could create a generic class which if used would automatically make the element scrollable. I was thinking of something along the lines as Draggable.create(".scroll-container", {type:"scrollTop", edgeResistance:0.5, throwProps:true}); This works the way I want it if the element is already in the DOM. Is there a way I could have this function look for .scroll-container to show up in the DOM? Not sure if this is a GreenSock question or not. gonna check on Knockout forums as well but I have to assume this is an issue others have run into and felt it was worth checking here.

Well I just wanted to follow up with my solution. It took longer then I care to admit and the code feels a bit verbose but it's behaves how I wanted it to. I used some of the advice from here but also borrowed the technique from this post for dragging multiple elements. http://greensock.com/forums/topic/10407-how-to-drag-multiple-items/ when I tried using the collision detection and the example above my tweens were failing to finish out because they were depended on target instance and then got updated when the active index was changed so the tween didn't know which side to snap to. You can see my solution below. Thanks again for everyone's help! http://codepen.io/OrganicPixels/pen/YqvVpQ

Thanks for the feedback Blake. I had to jump to another task temporarily which has delayed my progress on it. I'm just now coming back to it but I realized I had an issue with my active slider's staying in sync which was causing me some issues. I'm working on resolving that now and hope to have something a little better soon. 2 quick questions if you don't mind me asking. 1. If I wanted to disable specific sections (i.e any section that is not immediately below the active section. Is there an ideal way to do that. I tried using the .disable() method but it seems to prevent me all of my instances to mess up and can't seem to re enable them with the event. Or maybe I just don't understand it well enough. Ideally I'd just apply a class to the ones I want to be effected but didnt' see anything I should be looking for in that case. I may be over thinking that. 2. Is it best to add the click handler using tween max for the animations, or should I keep that logic in the onRelease in the draggableCards instance? Thanks again for spending your time replying. I'm not a js expert and somewhat new to greensock so I'm pretty sure my logic is verbose. I'm sure you have alot of better things you could be doing but all of your feedback is extremely helpful!

Blake, Thanks for the thorough response. I'm digging into the codepen you linked to with the "sticky" divs. I thought about doing it the way you mentioned with the bounds but my content sections are full height and my draggables are wrapping around the content and the headers. In hind site, not sure if there was a better way to implement the expected behavior. In either case I'm studying what you've shared. Thanks again for the input. Jason

Hi Rodrigo, Thanks for responding. However I don't think that's exactly what I'm looking for. My structure doesn't allow me to using the bounds since I'm having items overlap and I want to conditionally move groups of accordion elements with drag. I've almost gotten to where I need to be but it almost seems like my tween is being reset when the onPress event finishes. Not sure what's causing that? Anyone who may have insight as to why would really be a big help. Thanks so much. Here's an updated state of what I'm working on. http://codepen.io/OrganicPixels/pen/XdEGNE

Hi guys, I'm building a bit of unique accordion where the sections are cards that swap on top of each other. the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0; I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. I'm almost there it feels but I can't seems. Howver my challenge now is to make is so when you have slide 1 open. if you swipe up from slide 4 to have slide 3 and 2 track up wards with the movement. I've got it behaving correctly via taps but I really need it work with dragging as well. any thoughts? Thanks! Jason http://codepen.io/OrganicPixels/pen/VaXbVV

Awesome! Thanks for the quick reply Jonathon. Huge help!

Hi everyone, Please forgive me as I'm new to GreenSock and this is my first 3d box so I'm not sure which problems I'm having here. My main problem with GS is for some reason when my box loads initially it's animating as the page loads when I really just want it fired when it's been triggered by the buttons. I realize the TweenMax.to method creates the animation but how would I only fire it with an event listener. Maybe I'm not familiar enough with js but I thought when you store logic in a var it needs to be called with an expression via (). What am I missing here? Also, I know this may be a little off GS topic but I'm trying to get my box to be full width and height of the container and it seems like my perspective is off. Any suggestions on how to handle this? Thanks for any help. OP