funkybudda

I am super excited about this plugin, cant wait.

hi all, I learned a lot from all the replies, thanks for that. I do have a question for people that are familiar from the creative / design side, are people still provide creative files via PSD format? What about Adobe XD? It seems XD able to use multiple different canvas size is an ideal way to include all the diff design banner template sizes in one format.

agree with you 100%, given the immense popularity of reactjs, it would be very helpful. Btw, have you check out this post: http://greensock.com/forums/topic/13970-wrote-an-article-that-demos-how-to-use-gsap-with-react/

hi, thanks for the article, as someone deciding to stick with Angular (waiting on angular 2) or moving to react, this article definitely helps me in the decision. I hope you will write more article on this topic.

I highly recommend scrollmagic.js (which works very well with GSAP) for the effect you need: https://ihatetomatoes.net/simple-scrollmagic-tutorial/ http://scrollmagic.io/examples/index.html

I was playing around with this old effect from my Flash days, maybe this could help you get started: http://codepen.io/funkybudda/pen/oXqwGm

hi, the codepen link no longer works, would you be kind to post it again?

I made the same transition recently, from Webstorm to Sublime 3. Perhaps it's because my work Macbook is quite old, but Webstorm was sucking a lot of resources and the fan constantly stays on. Webstorm requires purchase (but 30 day free trial), but sublime is free (you get the occasional prompt to purchase). I'd say try both for few weeks and see what you prefer and how your computer react to each

hi Carl, is the ebook any different than the printed version? At my job we have few members that have purchased the print version of the book and would love to be able to get the e-book version. If it's a new version, how much content has changed?

hi, I had to look into some falling leaf animation a while back, here are two codpen that might be helpful to you: http://codepen.io/funkybudda/pen/oXXWYx http://codepen.io/funkybudda/pen/mJpeKR

hello all, the original codenpen I used for my demo is here: http://codepen.io/funkybudda/pen/OVZJEV As you can see, this is a responsive 3D menu, when you click on any specific parent box (1-16), the inner child (detail content) will scale up to fit the viewport area correct. For my need, I have to have the 3D menu set up in a container that's centered within the viewport, so I modified with the codepen below: http://codepen.io/funkybudda/pen/rVdXKb The transition of clicking on any of the parent boxes still works, but the inner child (detail content) position are offset incorrectly. I have change some of the viewport size detection to reference the new container (#outerContainer), but I still cant figure out the offset issue with the child animation. Any help from 3D experts using GSAP will be greatly appreciated. PS: Would it be easier to use the parent boxes to snap into the container size area, instead of using the child content? How would one go about the calculate the correct camera/pan value to move the parent object into correct position?

you're the man, that solved it. Thanks!

hello all, I came across this thread when searching through the forum on 3D perspective rotation, and the codepen examples in here were good starting point for what I need. I have forked a codepen here: http://codepen.io/funkybudda/pen/mJxZGb The issue I am trying to address is when a specific "wrap" div is hovered and the 3D rotation starts, I cant seem to address the z-index of the div, and the animation is "clipped" on the adjacent divs. What I did to get the z-index to change is this line: // set z-index to be higher than other TweenMax.set($this, {zIndex:50}); Please see the codepen for the demo. Any help will be greatly appreciated.

hi, is it the same book as the printed version? If yes, how can those people that previously purchased the book have access to the ebook version?

Thank you for the quick reply, your solution worked.

hello all, I am learning GSAP with the GSAP tutorial book I purchased from Nobledesktop, so far so good but I am running into an issue in one of the exercise. Basically, using TweenLite.from, the opacity of the target still visible for fraction of a sec before the animation starts, I want to fix it so that when the animation runs, the target is not visible, as intended by using TweenLite.from. I did a search and saw a thread that suggest using TweenLite.render(), but that didnt help me. Below is the HTML (I added the zip file for the exercise): <!DOCTYPE html> <html> <head> <title>2D Transforms</title> <style type="text/css"> body { background-color:#041218; color: white; } .panel { position: relative; background: url(img/gradient-bg.jpg); width: 700px; height: 400px; margin:50px auto 0 auto; overflow: hidden; } .clapper { position: absolute; width: 295px; height: 225px; left: 32px; top: 105px; } .clapper-top { position: absolute; } .clapper-bottom { position: absolute; top: 30px; } .panel h3 { position: absolute; left: 350px; top: 100px; font-size: 60px; font-family: Arial, Verdana, Helvetica, sans-serif; display: inline-block; } </style> </head> <body> <div class="panel"> <div class="clapper"> <img class="clapper-top" src="img/clapper-top.png"> <img class="clapper-bottom" src="img/clapper-bottom.png"> </div> <h3>ACTION!</h3> </div> <!-- load scripts after dom has been rendered --> <script src="js/gsap/TweenLite.js"></script> <script src="js/gsap/plugins/CSSPlugin.js"></script> <script src="js/gsap/easing/EasePack.js"></script> <script src="js/jquery/jquery-1.9.1.min.js"></script> <script> var $clapperTop = $(".clapper-top"); $action = $(".panel h3"); TweenLite.to($clapperTop, 0.5, {rotation:-20, transformOrigin:"15px 15px", ease:Power4.easeIn}); TweenLite.to($clapperTop, 0.1, {rotation:0, ease:Power4.easeIn, delay:1}); TweenLite.from($action, 0.2, {opacity:0, scale:0, ease:Bounce.easeOut, delay:1.1}); TweenLite.to($action, 0.5, {skewX:-45, left:750, ease:Back.easeIn, delay:1.5}); // this didnt help TweenLite.render(); </script> </body> </html> Any help will be greatly appreciated, thanks. [edit : attachment removed by admin]

hello, do you have any update on John Lindquist's cass for using GSAP with AngularJS? Will you consider making some tutorials on here to show how to use GSAP properly in AngularJS? With AngularJS being in high demand right now, it would be very helpful.

hi, I managed to figure out what happened (I will spare the stupid mistake I made, lol), I got it working even with the latest version of the TweenMax. Thanks for the quick reply, your support continues to be amazing.

hello all, just renewed with a shockingly green membership, and I really could use some help. I am trying to replicate the 3D flip example here: http://ahrengot.com/playground/tweenmax-examples/3d-flip/ I've downloaded his same image and follow the same tutorial, but it just work the same way. My completed example has the initial stack shown right off the bat, where his example shows the first one animated in. If you try to download his page with resources you will see what I mean. I even try to match his jquery version and TweenMax version, but I just cant recreate it. Any help would be greatly appreciated, thanks. PS I included my demo example.

ah ok, thanks for clearing that up, I received this plugin when I signed up with the $99 club option.

hi, anyone can point to some demo samples or a quick tutorial on how to use this plugin? I cant find any info on this plugin in the online documentation at all... thanks.