Jump to content

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

retropunk last won the day on April 16 2015

retropunk had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by retropunk

  1. Ok thanks. I'll give that a shot today and let you know.
  2. 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 -
  3. 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
  4. 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
  5. 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
  6. aha. I was so close but I had the values wrong. Thanks for clearing that up Jamie. Awesome.
  7. 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
  8. 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.
  9. 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.
  10. 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
  11. retropunk

    GSJS Slider

    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!
  12. oh I see...my bad. I had a strong feeling I was missing something. Totally makes sense now! Thanks a million as always!
  13. 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"&
  14. Thanks. I should've searched first. My bad.
  15. 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
  16. Thanks for this post. I just came across this issue and couldn't figure it out. Saved time BIGTIME!
  17. retropunk

    IE8 help

    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 sur
  18. retropunk

    IE8 help

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

    IE8 help

    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"); } //
  20. 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
  21. 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 th
  22. 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; cropIma
  23. 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
  24. 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!
  25. Hey Jack,m I am using the following: var manager : TransformManager = new TransformManager( {bounds:new Rectangle( IMAGE_VIEWPORT.x, IMAGE_VIEWPORT.y, IMAGE_VIEWPORT.width, IMAGE_VIEWPORT.height )} ); var crop : Crop = new Crop( _imageContainer, manager ); crop.cropMode = true; manager.selectItem( crop ); and it works PERFECT. The mask fits perfectly to the loaded image. And the bounds are perfectly set. What I am wondering is if I can set the properties of the crop area afterwards? For instance could I set the crop so its half the size of the loaded image and centered in the