retropunk

hey sounds pretty good. I might be able to come Saturday If I can I will certainly sign up! Thanks!

Ok thanks. I'll give that a shot today and let you know.

Hey guys, so I am having good success with this demo. Thanks again for the previous help. http://retropunk.com/files/workcards/ There are 2 things I am having trouble with now: 1. All webkit browsers display the 3D transform well. The IE7/8/9 backup works great. But in IE10 the 3D transform works but the back card fails to display. 2. The other thing is, how do I keep the current div thats flipping at the top most layer? If you notice the 1st card at the top left. The right part of the card flips under the next card. Can I shuffle the z order somehow? Thanks for any help guys - P

thats what I figured. That there would be a 'secret' property on the element. Interesting. This explanation helps. Thanks for you Pen too. I'm always interested in seeing how other people code stuff. Very cool Thanks again for the explanation

I guess my long explanation mislead my question. rotationX is not something I can access in JS the way you would in AS3 I am trying to figure out what the rotationX of a div is so I know which way to tween it each time. Hope that makes more sense. Thanks

Hey guys, I am working on this example with a card rotator based on a GS CodePen. http://retropunk.com/files/workcards/ Each card rotates forward twice and moves to the next one. What I would like to do is rotate a card once and then move to the next/random one. In AS3 I would do something like this if(cardsArray[currentCard].rotationX == -360) { resetProperties() } else if(cardsArray[currentCard].rotationX == -180) { animateAgain() } I tried looking up Computed Properties in JS but I think I'm barking up the wrong tree. Any help on this subject would be helpful. I'm a little fried at the moment Thanks! - P

aha. I was so close but I had the values wrong. Thanks for clearing that up Jamie. Awesome.

Hey guys, I was playing with the sample here http://codepen.io/GreenSock/pen/yzahJ and forked it to this http://codepen.io/SnapToPixels/pen/zvGos When you rotate on the Y the origin is from the center When you rotate on the X the origin is from the top How can I get it to rotate the X and have the origin be the center? Thanks guys - P

I can see more of how its working now, animating the hole in the circle on the canvas. It's not as straight forward as adding a mask to an element an tweening it but I am understanding more now.

Creating the circle in canvas makes sense. I can even see where he's working with the canvas and using beginPath() on line 163 in script.js Where I am stumped is how the circle animates and reveals the content underneath.

Hello everyone, I am always interested in porting my AS skills to JS/CSS. Today I was checking out this portfolio site http://www.vitosalvatore.com It uses Greensock well and the simplicity of the site makes me smile. One thing I couldn't figure out is the circle mask effect upon site load. It appears to mask in the content but I'm not sure. Can anyone tell me how he did that? And to that point, is there a solution for masking elements in HTML the way you can mask things in Flash? WebGL, SVG etc? Thanks guys! - P

check out the Jump Start series here http://www.greensock.com/jump-start-js/ I've learned so much from simply copy and pasting the examples and noodling with the examples. What you are asking for can be found in different examples on this site. Good luck!

oh I see...my bad. I had a strong feeling I was missing something. Totally makes sense now! Thanks a million as always!

I was just going through the Jump Start demo and I created a demo of my own based off the first slide I came across something that I don't understand. If I place an image into the body of an html page like: <img src="img/logo.png" id="logo"> and then do this in JS, the tween doesn't work var logo = document.getElementById("logo"); TweenLite.to( logo, 1, {left:"600px"}); but if I do this, it works var logo = document.getElementById("logo"); TweenLite.from( logo, 1, {css:{alpha:0}, delay:1}); now if I set the div like this, similar to the Jump Start demo <div id="logo"></div> and set the background image in CSS, this works var logo = document.getElementById("logo"); TweenLite.to( logo, 1, {left:"600px"}); So I guess my question is...Is placing an image into a div via CSS a requirement for Tweening certain properties? Thanks! - Patrick

Thanks. I should've searched first. My bad.

Hey guys, I am curious to see if this is an issue or not. Firefox has a plugin called Javascript Deobfuscator https://addons.mozil...t-deobfuscator/ Its pretty cool. I was testing a Tweenlite example and the "Number of calls" in the Javascript Deobfuscator doesn't ever stop. It just keeps incrementing. Then I tested in on the Greensock site and its the same. (see attached) Is this correct? Why does the number of calls keep going up? Thanks for the help - P

Thanks for this post. I just came across this issue and couldn't figure it out. Saved time BIGTIME!

oh ok, I see now. This is making way more sense. autoAlpha is definitely the way to go too. Thanks for that. So awesome FYI - I've inherited this massive HTML/JS site and it's not exactly the greatest build. I've been tasked with "optimizing it" So I am starting by swapping out all the animations with GSAP. So far its been working perfect, I'm learning alot and the lines of code have reduced drastically. It makes me feel comfortable to see TweenLite when I am in the depths of HTML5 hell! On this app the GS animations play perfectly everywhere but IE8. So I went back into the SVN and sure enough I see that even the previous versions alpha/opacity animations aren't working in IE8! UGH! I did a simple test outside of the app and of course tweening the alpha works just fine in IE8. Browser fragmentation is so damn annoying, I feel like I am going backwards in time! I can only imagine what you go through to make sure this all works in all browsers. Yikes. Anyways, something must be overriding the filters like you said. I am going to work on it this weekend and see if I can figure it out on my own. If I can't find it I will reach out again. Thanks again Jack

It doesn't seem to be listening to the tween at all. I am going to look at the rest of the code in the site and see if I can pin point any other animations. If I can't find it I will come back for more help. I wanted to make sure I wasn't implementing the JS/CSS code wrong. I inherited an HTML site and I am learning as I go here. So can I do this in JS? Or is it better to do in CSS as a general rule? TweenLite.to(image, 1, {alpha:0}); Thanks

Hello guys, I posted a similar post in the wrong section earlier This JS code works great everywhere except IE8 // function getElem(id){ return document.getElementById(id); } var seq = new TimelineLite( {onComplete:onTweenComplete, delay:.1} ); seq.append( TweenLite.to(getElem('header'), .4, {css:{alpha:1}}) ); seq.append( TweenLite.to(getElem('tabs'), .4, {css:{alpha:1}}) ); seq.append( TweenLite.to(getElem('footer'), .4, {css:{alpha:1}}) ); seq.append( TweenLite.to(getElem('contentDiv'), .5, {css:{alpha:1}}) ); seq.play(); function onTweenComplete(){ console.log("tween done"); } // Thanks for the help

The iPad performance difference has to do with StageVideo. In my tests it out performs the FLV format on AIR for the desktop because StageVideo isn't available on AIR for the desktop yet. Which kinda sucks since the performance is so great everywhere else. The FLV plays just fine on the desktop, the performance difference I was getting at is when you want to seek or fast forward. On the desktop FLV jumps all around and the scrub bar is never accurate. StageVideo allows pixel perfect accuracy with the scrub bar. Smoother experience. It seems that MP4 with H.264 compression is the winner at the moment. btw this post was probably meant more for a different forum since the performance testing has nothing really to do with your library I was hoping someone here had some experience similar to mine. Thanks anyways Jack

Has there ever been any feedback from the Greensock community or do you know which video format seems to perform best in the Flash Player with the VideoLoader? To be more specific, I have a video component that loads and controls the video stream (pause/play/seek/scrub bar etc). I want to make sure the scrub bar and fast forward controls react as smooth as possible. I've gotten amazing results recently with MP4 at 30fps, StageVideo and NetStream on the iPad. The scrub bar is perfect and the seek is incredibly accurate. Then I did a quick test on the desktop with an FLV and F4V files and the seek scrub bar performance was terrible. I am now working on the desktop in this project and I have a bit more bandwidth to use. I'm hoping to get some feedback from any experienced video users out there. Thanks everyone - P

Hi everyone, I am working a ui that can access the TransformManager. So far this solution works well so I thought I would share it. I'm also posting this to see if anyone has created a similar solution and if so maybe we could share ideas. I welcome any constructive criticism or alternate solutions Thanks - Patrick private function resetImageSize_click( event : MouseEvent ) : void { imgEditManager.selectItem( cropImageHolder ); cropImageHolder.rotation = 0; cropImageHolder.width = originalSpriteInfo.width; cropImageHolder.height = originalSpriteInfo.height; cropImageHolder.x = originalSpriteInfo.x; cropImageHolder.y = originalSpriteInfo.y; imgEditManager.updateSelection(); } // ==================== // Zoom Increase Handlers // ==================== private function zoomIncrease_mouseUp( event : MouseEvent ) : void { stage.removeEventListener(Event.ENTER_FRAME, zoomIncrease_onEnterFrame); } private function zoomIncrease_mouseDown( event : MouseEvent ) : void { stage.addEventListener(Event.ENTER_FRAME, zoomIncrease_onEnterFrame); } private function zoomIncrease_onEnterFrame( event : Event ) : void { imgEditManager.selectItem( cropImageHolder ); imgEditManager.scaleSelection(1.01, 1.01); } // ==================== // Zoom Decrease Handlers // ==================== private function zoomDecrease_mouseUp( event : MouseEvent ) : void { stage.removeEventListener(Event.ENTER_FRAME, zoomDecrease_onEnterFrame); } private function zoomDecrease_mouseDown( event : MouseEvent ) : void { stage.addEventListener(Event.ENTER_FRAME, zoomDecrease_onEnterFrame); } private function zoomDecrease_onEnterFrame( event : Event ) : void { imgEditManager.selectItem( cropImageHolder ); imgEditManager.scaleSelection(.99, .99); } // ==================== // Rotate Right Handlers // ==================== private function rotateRight_mouseDown( event : MouseEvent ) : void { stage.addEventListener(Event.ENTER_FRAME, rotateRight_onEnterFrame); } private function rotateRight_mouseUp( event : MouseEvent ) : void { stage.removeEventListener(Event.ENTER_FRAME, rotateRight_onEnterFrame); } private function rotateRight_onEnterFrame( event : Event ) : void { imgEditManager.selectItem( cropImageHolder ); imgEditManager.rotateSelection(.01); } // ==================== // Rotate Left Handlers // ==================== private function rotateLeft_mouseDown( event : MouseEvent ) : void { stage.addEventListener(Event.ENTER_FRAME, rotateLeft_onEnterFrame); } private function rotateLeft_mouseUp( event : MouseEvent ) : void { stage.removeEventListener(Event.ENTER_FRAME, rotateLeft_onEnterFrame); } private function rotateLeft_onEnterFrame( event : Event ) : void { imgEditManager.selectItem( cropImageHolder ); imgEditManager.rotateSelection(-.01); }

I am building a tool that uses the Transform Manager and I am using a custom shaped mask. I need to save a PNG file with transparency. Is this what you were able to solve? I see that you were working with the transform.matrix The code above looks great but without your assets its difficult to see your solution. Would you paste your full solution please if possible? I'm stuck at the moment. Thanks for the help - Patrick

oh I see, I didn't realize that you could adjust the crop properties...duh Thanks Jack. This tool is really amazing. I'll have to show you this tool I am working on. You will be proud! Talk soon!