Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Ahrengot last won the day on August 23 2012

Ahrengot had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Ahrengot last won the day on August 23 2012

Ahrengot had the most liked content!

Community Reputation

11 Newbie

About Ahrengot

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
  • Location

Recent Profile Visitors

3,806 profile views
  1. Also, I found this article valuable in figuring out what Apple did: https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/
  2. 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 vide
  3. 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 thoug
  4. 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.
  5. 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?
  6. 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
  7. 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...
  8. 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?
  9. 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 = "
  10. Perfect! I tried setting translateZ in CSS but naturally that didn't work as 2D transforms in GSAP use the matrix syntax, not translate3d.
  11. Interresting solution midimid. Do you have a link to the page where you're doing this?
  12. 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 oth
  13. 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.
  14. 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.
  15. 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 a