[Animating the playhead of <video> element. Is it possible?]

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

[Animating the playhead of <video> element. Is it possible?]

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... 

[Animating the playhead of <video> element. Is it possible?]

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.

 

See the Pen GpBGLe by Ahrengot (@Ahrengot) on CodePen

 

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

[Animating the playhead of <video> element. Is it possible?]

Maybe I'm not using a long enough video, but it works fine here.

 

See the Pen 0dbaf4a4e8aad479b6d318f21eb7afe7?editors=001 by osublake (@osublake) on CodePen

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.

[Animating the playhead of <video> element. Is it possible?]

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?

[Animating the playhead of <video> element. Is it possible?]

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

 

 

[Bug report: Nested 3D transform and the Webkit Matrix]

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...

[Bug report: Nested 3D transform and the Webkit Matrix]

Or you can even feed GSAP the CSS transform property:

 

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? 

[Bug report: Nested 3D transform and the Webkit Matrix]

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:

See the Pen kvaqA by Ahrengot (@Ahrengot) on CodePen

[Subpixel animations?]

 

 

You could set a z property to something like 0.01 or recent versions of GSAP have a "force3D" boolean that you can set.

 

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

[Draggable interrupts page scrolling on iOS]

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

[Draggable – Hold to drag]

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.

[Draggable – Hold to drag]

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.

[Draggable interrupts page scrolling on iOS]

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.

[Draggable – Hold to drag]

 

 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. 

 

[How to fix rendering artifacts in Chrome]

Actually, I can see that switching from public realease version of chrome (v.21) to the latest developer build (v.23) fixes the problem, so it seems like they're aware of it.

 

Anyway, it would still be nice if anyone knew of a temporary fix.

[How to fix rendering artifacts in Chrome]

Hey guys,

 

From time to time I get wierd rendering artifacts in Google Chrome when using TweenMax. They only appear in Chrome, so I'm pretty sure its a bug in that particular browser, but I'd really like to get rid of them.

 

Does this only happen to me? Does anyone know a hack to git rid of these artifacts?

 

There's a live demo of the issue here: http://ahrengot.com/...round/tweenmax/ ... Click anywhere to animate the box and see the issue.

 

And here's a screenshot of the artifacts:

[Share your Greensock JS creations!]

The case study for Skive Festival 2012 on my portfolio uses TweenMax to animate various items on that page when it opens and as you scroll down.

 

In fact, I've been using TweenMax heavily since the beta and put it to active use in two projects that'll launch on september 1st (I'll share some links then).

 

It's truly a game changer to have a tool that takes the pain out of high quality, cross-browser compliant animation. I relied on TweenMax all the time back when I used to do Flash work, and I am so happy to finally have this powerful toolkit at my disposal again.

[Weird stuff happens when i load through a php proxy]

Cool, Jack, makes sense now that i know why — I was just surprised that the XMLLoader fired the onComplete callback as if everything was great even though the content was missing.

[Weird stuff happens when i load through a php proxy]

Hmm...are you sure your proxy is working? I just hit it through my browser and got nothing returned and I also tried to verify what you were saying about a plain URLLoader working fine, but it gave me exactly the same result as XMLLoader (blank). What am I missing?

 

I was experimenting with something in the proxy yesterday that broke it for about 20 minutes, we might be unlucky enough that you tested it in that excact time period, because it should be working. I've uploaded a new one just for this forum post, so i won't touch it, i promise - It's an exact copy of the proxy from when I posted the bug yesterday: http://openminded.dk/php/proxy.php

 

if you send a url to the file via GET or POST you'll see it works just fine. At least it does when i query it like so: http://openminded.dk/php/proxy.php?url=http://blog.openminded.dk/api/read/

 

Please note that i've updated the example with the new proxy url - I've also added a URLLoader in the example which works as it should here on my machine (it traces out the blog feed of http://blog.openminded.dk/).

[Weird stuff happens when i load through a php proxy]

Hey jack,

 

Just a heads up. When i load xml feeds through a php proxy. i.e. "domain.com/php/proxy.php?url=http://whatever/feed" with the XML loader it will successfully call the onComplete method, but the content is an empty string. I know the proxy works and it has nothing to do with crossdomain pains because it works when i simply load the same url through the native URLLoader class.

 

It doesn't matter wether i send the url to XMLLoader wrapped in a URLRequest or not.

 

Is this a bug that you're aware of, if so, is there a workaround other than using URLLoader?

 

I've uploaded a simple example. I've also provided the php code i use in my proxy file.

[VideolLoader and the crop property]

Sweetness, thanks

[VideolLoader and the crop property]

Hey Jack!

 

I'm having some trouble with the crop property of the VideoLoader, when it's applied multiple times in a resize method i've set up.

I've always thought ScrollRect's were kind of weird, so i'm not quite sure how to fix it.

 

This is a resize method i have on a class implementing your Video Loader. If if uncomment the _loader.content.crop line things start acting out. I'm assuming it's because the Content Display has a hard time reading the true width/height properties when it's doing it's resizing magic, if a ScrollRect is applied to it's content.

 

The following method is called every time the stage dispatches a RESIZE event.

public function setSize($width:int, $height:int, $scaleMode:String = "proportionalOutside", $hAlign:String = "center", $vAlign:String = "center", $crop:Boolean = true):void 
{
_loader.content.hAlign = $hAlign;
_loader.content.vAlign = $vAlign;
//_loader.content.crop = $crop;
_loader.content.scaleMode = $scaleMode;
_loader.content.fitWidth = $width;
_loader.content.fitHeight = $height;
}

 

Is there anything i can do to fix this, because having the crop option as part of my resize method would be nice.

[Can i use delayedCall() to change a variable or a setter?]

Oh but of course! TweenLite/Max also needs to be able to read the current value of the property in order to calculate what it should be at the next update. Thanks Jack!

[Size tweening help please]

There are 2 ways of doing this. Either manually center the registration point of your MovieClip or use the TransformAroundCenter plugin if you're a Club Greensock member. Check out how it works in the plugin explorer on this page: http://www.greensock.com/tweenmax/