Ahrengot

Also, I found this article valuable in figuring out what Apple did: https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/

Thanks for the update, however I tried preload before and I think I've found the issue now. It simply seems to be the way the video file is encoded that caused the issue. I was just about to abandon ship and do this whole thing in canvas, when I noticed that Apple uses a video here: http://www.apple.com/mac-pro/ I grabbed the video file: http://movies.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4 and replaced my existing one with that. The apple video runs smoothly when I tween currentTime so it simply seems to be an issue with the video. Interresting...

Hey guys — Thanks again or all of the feedback. I think this simply has to do with my video file being too large for this to work. Here's your codepen with a larger video, and it acts simmilar to as what I'm seeing with my actual video file. I guess this is a limitation in the way the browser buffers video and there's nothing I can do about it. It even lags this much when I play the video from disc. http://codepen.io/Ahrengot/pen/GpBGLe You'll see I also changed the lagSmoothing to a whopping 50.000 and still getting a very laggy result. The small video plays really smoothly though

Oh wow that is smooth! I wonder if something funky is going on with my video file then, because it takes about 1 full second for it to refresh the currentTime. I'll investigate some more. Thanks for the answers everybody.

Hey Jonathan, Thanks a lot for the elaborate answer. However I think i didn't get my challenge across clearly enough. I'm trying to animate the progress of the video itself. It seems like your solution is for animating a progress indicator, unless I'm missing something?

Hey guys, I have a pretty interesting challenge. I need to animate the "playhead" of a <video> element. Ie the video.currentTime property. Running currentTime through TweenMax like so doesn't work as setting currentTime takes a little while to update, so it simply jumps to it's destination. I suspect what I want to do can't be done using the native <video> element, but I have to use an image sequence and <canvas> instead, but I wanted to check with you bright fellas before venturing down that path

Oh really? That's interresting! I never did more complicated 3D in CSS before. I've rarely been transforming multiple values, but they way you explain it makes a lot of sense. It's certainly not a bug then. I'll rename the post title. Thanks everyone for clearing this up. edit: Hmm, looks like I can't edit post title...

Oh, great! That's what I was looking for. But wouldn't one usually expect that // This { transform: "rotateX(90deg) translateZ(100px)" } // Vs. this { rotationX: 90, z: 100 } would give the same result, or am I completely missing something here?

Hey guys, I'm pretty sure I've stumbled on a bug here. I'm building a cube-gallery with TweenLite. The cube itself is transformed as are the 6 faces. (2 in this case, because i simplified it). Here's my JS example: // Setup props for cube and sides TweenMax.set("#cube", { z: -100, transformOrigin: "center" }); // Use GSAP to set values (Matrix) // TweenMax.set(document.querySelector(".top"), { rotationX: 90, z: 100 }); // TweenMax.set(document.querySelector(".front"), { z: 100 }); // Set values normally (rotateX, translateZ) document.querySelector(".top").style.webkitTransform = "rotateX(90deg) translateZ(100px)"; document.querySelector(".front").style.webkitTransform = "translateZ(100px)"; TweenMax.to("#cube", 1.5, { rotationX: -90, yoyo: true, repeat: -1, ease: Power3.easeInOut }); Now, using rotateX and translateZ it works just fine (In webkit, I didn't write out the other prefixes), but if I switch to the GSAP version it breaks. I'm guessing this has to do with the Matrix that is being applied instead of translateX/translateZ. Is there a way to force GSAP to not use the matrix? I think that would fix it for now, and i'd much prefer using the GSAP syntax. I can't use CSS to transform the elements as they switch position when the "slider" updates. For instance, if there are only 2 slides it should move them around seamlessly to give the impression of a cube with 6 faces. I put together a Codepen with a working example and the CSS I use: http://codepen.io/Ahrengot/pen/kvaqA

Perfect! I tried setting translateZ in CSS but naturally that didn't work as 2D transforms in GSAP use the matrix syntax, not translate3d.

Interresting solution midimid. Do you have a link to the page where you're doing this?

Alright, my solution worked. I put up a simplified version of what i did on GitHub: Example http://ahrengot.github.io/gsap-draggable-hold-to-drag/ Source code https://github.com/Ahrengot/gsap-draggable-hold-to-drag/tree/master I wrapped it in a ListSorter class that is easy to extend, for anyone in the same boat. For my own use case, I also created all of the logic for re-shuffling items so you get a true sortable list UI, but that's coupled together with a whole Backbone.js Model, View, Controller setup, and would probably be more confusing than helpful, if you use something other than Backbone, so I kept it short and sweet instead (57 lines). You'll find a CoffeeScript file as well as the compiled JavaScript. Quick walk-through: (Line numbers and links are to the CoffeeScript version, but it should be simple following along in the compiled JavaScript version) Line 5 sets up the hold listener using hammer.js Line 8 creates the draggables and immediately starts dragging the pressed down element From here on Draggable does it's thing and in it's onDragEnd() callback the draggables are destroyed and the hold event listener is set up once again. I also added in a destroy() method that will remove all event listeners, and any inline styling, that was applied by draggable.

Thanks for the suggestion Rhenando, From reading the code though, I'm not sure this would work. I need to immidiately start dragging after the presshold, so I'm working on an solution where i let hammer.js handle the presshold event (As it works on both desktop and mobile) and in the event callback I activate Draggable and create a fake drag event so that the dragging starts immidiately. Will post a simplified version of my code if it works.

Hey Steve, This reply might come in too late, but I'm working on a similar challenge in my post http://forums.greensock.com/topic/8372-draggable-%E2%80%93-hold-to-drag/#entry32521 where there was posted one possible solution. edit: I came up with another solution for this problem. Click the link above to see it.

Hey guys, I find myself in a pretty interesting UI challenge that I think Draggable might be able to solve. I will try to explain it as clearly as possible. Here's what I want to do – on both mobile and desktop: 1. Have a list of edge-to-edge elements (Think the contacts list on iOS without the separators) that the user can scroll through normally. 2. Allow the user to tap / click and select/deselect the list items 3. Hold the finger or mouse button down for 800ms and initiate drag/drop so that the items can be re-ordered. The main problem is having drag and native scroll at the same time on mobile devices. Quite naturally because Draggable uses the touch events to perform its dragging magic, so when you try to scroll the list, you instead throw the list items around. I plan on tackling this one by setting up my own mousedown / touchstart listener and combine it with a timer that would then create a new Draggable instance if the mouse/finger is still pressed after the 800ms. At that point I could forward the mouse position via an event to the new draggable.startDrag() method and have it drag instantly after being created. From what I can tell, this would be the simplest way to solve my problem, but I just wanted to make sure this logic isn't part of Draggable as is, and that the problem hasn't already been solved for me.