Jump to content
Search Community

funkybudda

Premium

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by funkybudda

    Switching from Animate CC to hand coding - Advice required

    in Banner Animation

    Posted

    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.

     

     

    GreenSock ReactJS components needed

    in GSAP

    Posted

    The problem is fundamental. Imperative GSAP code doesn't fit well with declarative React code. The problem isn't specific to GSAP. React does not have a good animation story at the moment. This is something I hope GSAP might address in the future. The blog post I linked describes the problem well:

     

    "React and animation don’t actually play well together at first. There’s an impedance mis-match: React’s power stems from abstracting away the state transitions in your UIs (it does them quickly and correctly, enabling the declarative paradigm we’ve come to love), while animations live entirely within those state transitions."

     

    and

     

    "To integrate smoothly with React’s declarative nature, we’ll need our animation behavior to be fully described by the output of our render methods: a desired end state."

     

    https://fabric.io/blog/introducing-the-velocityreact-library

     

    Their solution was a set of React components that let them create animations in a React friendly way. Something like that for GSAP would be amazing. GSAP should embrace React.

     

    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/

    Recommended editor for windows?

    in GSAP

    Posted

    Well, I crossed from a IDE to a simpler approach. I started working with Dreamweaver but got tired of all the resources it uses, same thing with WebStorm.

     

    I currently use Sublime Text 3 and I'm extremely happy because of how fast and flexible it is. Basically you meke the editor work as you need it to be and you can add some plugins and snippets into it in order to make it more robust. For example I have the AngularJS code snippets that gives you all the possible methods and constructors available and you can also configure them as you need because everything is in a JSON format, so it's very easy an intuitive to do. Also I have the GSAP snippets (otherwise that would be a major heresy) and you can have as many opened files in different tabs/windows as you want, you can manage complete folders as well and expand/collapse the side bar as you want. Finally besides using other snippets you can find some cool plugins like emmet (http://emmet.io/) makes things even easier.

     

    For those interested in this features take a look at this video:

     

    Sure Sublime doesn't have some cool features other programs have but everything has it's trade-offs, like I said it's super fast, has a minimum system requirements and it also has a Grunt task snippets, Gulp, Git integration plugins and a lot of stuff.

     

    My experience, coming from a more complex software like Dreamweaver to a simpler one like Sublime is that it takes some time to get used to it. At first glance Sublime could seem a bit basic and even incomplete but once you get into it and you find out all the cool stuff that is out there you can create a very complezx and robust environment for your projects.

     

    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 :)

    Now on Lynda.com Creating an HTML5 Banner Ad with GreenSock (GSAP)

    in Banner Animation

    Posted

    Thanks for the comments, guys.

     

    Cormack,

     

    Anything in particular (basics, advanced concepts, games, banners) you would like to see covered in a video? 

    We definitely take those suggestions seriously.

     

    Fortunately (for everyone) it seems a lot more training is becoming available.

    We just released our eBook: https://www.nobledesktop.com/books/gsap and Petr Tichy is putting out some great videos soon too: https://ihatetomatoes.net/greensock-workshop-coming-soon/

     

    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?

    Help with 3D perspective, child object snap to incorrect position

    in GSAP

    Posted

    hello all,

     

    the original codenpen I used for my demo is here:

     

    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:

    See the Pen rVdXKb by funkybudda (@funkybudda) on CodePen

     

    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?

    See the Pen OVZJEV by funkybudda (@funkybudda) on CodePen

    3D Hover effect problem

    in GSAP

    Posted

    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:

    See the Pen mJxZGb by funkybudda (@funkybudda) on CodePen

     

     

    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.

    PDF File for GSAP(JS)

    in GSAP

    Posted

    We are working on an eBook. A few more weeks.

    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?

    TweenLite.From issue, target opacity still visible

    in GSAP

    Posted

    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]

    Angular.js ng-view javascript animation's

    in GSAP

    Posted

    I'm swamped at the moment and can't dig into this yet, but I can assure you that some of the top Angular guys out there are using GSAP with it. The guy who literally did the official videos on the home page of Angular (John Lindquist) is a big GSAP user, and e-mailed me recently saying he had recently done a class about Angular and GSAP working together. So I'm confident things should work great but clearly you're running into an issue. Can you please zip up a simple set of example files (with all dependencies) and post them here? I know you posted a link to your site, but we can't edit the files and save them back to your server, and when I try to save them locally, I'm getting all sorts of errors thrown by jQuery and angular about cross domain policies and missing files, etc. It certainly seems like whatever angular is passing as "element" to your module functions isn't really an element at all (at least that's what it seems like right now). It'll be much easier to troubleshoot once you provide a simple example set of files with all dependencies. 

    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.

    ahrengot.com 3D Flip tutorial / example bug

    in GSAP

    Posted

    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.

     

     

×
×
  • Create New...