28 Replies Latest reply on Feb 13, 2013 4:11 PM by Dam4222

    Using Greensock

    Dam4222 Level 1

      Hey Guys,

       

      I am just getting into Greensock and seeing some of the amazing things it can do in Edge. I am now trying to get a little creative and implement a use I had seen here animating a number... http://ahrengot.com/tutorials/greensock-javascript-animation/


      I have loaded it into my Edge comp, but I cant seem to figure out where I am going wrong. I am a complete beginner when it comes to all of this so I am trying to make ends meet with the little knowledge I have. See my example file below:


      http://dl.dropbox.com/u/9159616/numberanim.zip


      Thanks for your help!

      Adam

        • 1. Re: Using Greensock
          JonathanMarino

          Hey Adam,

           

          Glad to see that you are beginning to use Greensock.

           

          I am just beginning to familiarize myself with it as well, so I cannot really be of any help.

           

          I just want to formally suggest that this forum and maybe particularly this post dive further in the world of edge-greensock-jquery goodness and all that it has to offer.

           

          Maybe some working demos, cool examples of implementation etc.

           

          Any and all help is, as always, appeciated.

           

          - Jonathan Marino

          • 2. Re: Using Greensock
            Dam4222 Level 1

            Thanks Jonathan, I agree! It would be great to see Greensock and Adobe partner up to have some built in features. Remove some of the coding aspects of it, make it easier to implment.

             

            Adam

            • 3. Re: Using Greensock
              joel_pau Level 5

              So,

               

              You add one text box on Stage.

              textTagClass.jpg

              You click on div button and choose "p" then you click on c button and you write "number".

               

              Then you change last line of your code: sym.$('#number-input').on('submit', animate);

               

              File: https://www.box.com/s/osh5dh6vrf96jwevbbvu

              1 person found this helpful
              • 4. Re: Using Greensock
                Dam4222 Level 1

                Hi Joel,

                 

                I am not quite sure I am following this, here is the code I have so far:

                 

                sym.$("Text").html('<form id="number-input" action=""> <input type="number" value="2500" /> <button id="animate">Animate</button> </form>');

                 

                 

                yepnope(

                 

                 

                {

                 

                 

                nope:[

                'greensock/TweenLite.js',

                 

                 

                'greensock/TweenMax.js',

                 

                 

                'greensock/easing/EasePack.js',

                 

                 

                'greensock/plugins/CSSPlugin.js',

                 

                 

                'greensock/plugins/ColorPropsPlugin.js',

                 

                 

                'greensock/TimelineMax.js',

                 

                 

                ],

                 

                 

                complete: init

                 

                 

                }

                 

                 

                );

                 

                 

                 

                 

                //when yepnope has loaded everything execute init();

                 

                 

                function init (){

                 

                 

                var          $text          = getSymbolElement('p.number'),

                          $input          = getSymbolElement('input[type=number]'),

                          endVal          = 0,

                          currVal          = 0,

                          obj          = {};

                 

                 

                obj.getTextVal = function() {

                          return parseInt(currVal, 10);

                };

                 

                 

                obj.setTextVal = function(val) {

                          currVal = parseInt(val, 10);

                          $text.text(currVal);

                };

                 

                 

                obj.setTextVal(0);

                 

                 

                var animate = function(e) {

                          e.preventDefault();

                          currVal = 0; // Reset this every time

                          endVal = $input.val();

                 

                 

                          TweenLite.to(obj, 7, {setTextVal: endVal, ease: Power2.easeInOut});

                };

                 

                 

                sym.$('#number-input').on('submit', animate);

                 

                 

                -----------

                I lost you when you said "You click on div button and choose "p" then you click on c button and you write "number"."

                 

                Adam

                • 5. Re: Using Greensock
                  joel_pau Level 5

                  You click on div button and choose "p"

                  textTagClassDiv.jpg

                   

                  then you click on c button and you write "number".

                  textTagClass.jpg

                   

                  After, you will obtain:

                  classTextBox.jpg

                   

                   

                  Post #3: i added your project file. You can download it.

                  • 6. Re: Using Greensock
                    Dam4222 Level 1

                    Ahhh I got it! Thanks Joel. Here is the final link for people to check out.

                     

                    http://dl.dropbox.com/u/9159616/numberanim3.zip

                     

                    Any ideas about library to use to help do math?

                    • 7. Re: Using Greensock
                      resdesign Adobe Community Professional & MVP

                      Math is complicated. What do you want to do?

                      There is raphael for some graphs and pie charts for example.

                      http://raphaeljs.com/

                      • 8. Re: Using Greensock
                        Dam4222 Level 1

                        Hi Redesign,

                         

                        Essentially I want to do some simple division. I want to create something that allows for multiple inputs and then a few outputs. For example, I have attached the following spreadsheet... I want to do this, but make it really pretty using HTML, CSS and Javascript.

                         

                        http://dl.dropbox.com/u/9159616/Copy%20of%20LQ%20reach%20and%20frequency.xlsx

                         

                        Adam

                        • 9. Re: Using Greensock
                          resdesign Adobe Community Professional & MVP

                          Hi Adam,

                          Yes you can do that. You should be able to write a javascript that calculates your entries. Will you have input from users then calculations?

                          • 10. Re: Using Greensock
                            joel_pau Level 5

                            You can do it using form tags as your numberanim composition.

                            You've got a tuto here: http://www.html5rocks.com/en/tutorials/forms/html5forms/

                            Forms can be multiplied: number of nights x number of guests = estimated total.

                            formTags.jpg

                            • 11. Re: Using Greensock
                              Dam4222 Level 1

                              Hi Joel,

                               

                              Been messing around with this all morning but cant seem to figure out where I am going wrong. Looking at the tutorial, I pulled this together and placed it into composition ready:

                               

                              sym.$('#Stage').html('<form oninput='total.value = (nights.valueAsNumber * 99) + ((guests.valueAsNumber - 1) * 10)>

                               

                               

                                   sym.$("box1").html('<label>Number of nights (rooms are $99.00 per night):</label><input type="number" id="nights" name="nights" value="1" min="1" max="30" required>')

                               

                               

                                   sym.$("box2").html('<label>Number of guests (each additional guest adds $10.00 per night):</label><input type="number" id="guests" name="guests" value="1" min="1" max="4" required>')

                               

                               

                                   sym.$("box3").html('<label>Estimated total:</label> $<output id="total" name="total">99</output>.00<br><br>')

                               

                               

                              </form>)

                               

                              Its not returning anything by syntax errors in my browser. Can form input/output perform division as well?

                               

                              Adam

                              • 12. Re: Using Greensock
                                Dam4222 Level 1

                                Hey Redesign,

                                 

                                Any chance you could give me an idea of a simple Javascript method to do division that I can play with? I am a complete beginner in Javascript.

                                 

                                Thanks for your help.

                                 

                                Adam

                                • 13. Re: Using Greensock
                                  joel_pau Level 5

                                  Here are demo files: https://www.box.com/s/9wyzt740zl5fs60l997i

                                  You cannot slice the form tag.

                                  • 14. Re: Using Greensock
                                    Dam4222 Level 1

                                    Hi Joel,


                                    Thanks again for all your help with this. Check out what I have done so far... I am running into a few small issues which I am sure are just syntax related. See my link below and see if you can help fix my calculations of Uniques:

                                     

                                    http://dl.dropbox.com/u/9159616/AdCalculator.zip

                                     

                                    Ultimtately it would be awesome if this could use the TweenMax animation we created about one a number is submited into the input. Thanks for your help again.

                                     

                                    Adam

                                    • 15. Re: Using Greensock
                                      Dam4222 Level 1

                                      Two more things sorry... 1) How do you round the number to a Whole number instead of having decimal places? 2) How do you automatically add commas to a result or output?

                                       

                                      Thanks!

                                      Adam

                                      • 16. Re: Using Greensock
                                        joel_pau Level 5

                                        This code:

                                        <form oninput="impressions.value = Math.round(budget.valueAsNumber/CPM.valueAsNumber * 1000) ; uniques.value = Math.round(Math.round(budget.valueAsNumber/CPM.valueAsNumber * 1000)/freq.valueAsNumber)">'

                                        and so on...

                                        returns:

                                        formEdge.jpg

                                        Same results as Excel sheet:

                                        formExcel.jpg

                                         

                                         

                                        ==> Attached files: https://www.box.com/s/ei8yylzauww1dodk1w74

                                         

                                        Formatting a number as a currency:

                                        1) http://stackoverflow.com/questions/9372624/formatting-a-number-as-currency-using-css

                                        2) http://www.decorplanit.com/plugin/

                                        1 person found this helpful
                                        • 17. Re: Using Greensock
                                          Dam4222 Level 1

                                          Hi Joel,

                                           

                                          Thanks so much for your help! Here is what I have put together, even modified it based on what I learned from your example.

                                           

                                          http://dl.dropbox.com/u/9159616/AdCalc2.zip

                                           

                                          A few more questions if you dont mind and I will stop bugging you:

                                           

                                          1) How do I add commas to the results? 2) How do I round to 2 decimals and add a $ at the beggining for my Cost per Unique result? 3) How can I implement our previous animation where the numbers countup to the final total each time there are entered?

                                           

                                          Thanks again, I am really excited to be learning all of this.

                                           

                                          Adam

                                          • 18. Re: Using Greensock
                                            joel_pau Level 5

                                            So, questions about form and animate:

                                             

                                            1) How to animate your figures?

                                            As soon as you enter or as soon as you left an input tag: demo files here.

                                             

                                            2) Latest version: form rebuilt using jQuery rather than html5.

                                            Where do you want your dollar: before input tag or inside input tag?

                                            Do you want $ inside output tag as $0.26 (see the picture below).

                                            ==> demo file here.

                                            It returns:

                                            formDollar.jpg

                                            1 person found this helpful
                                            • 19. Re: Using Greensock
                                              Dam4222 Level 1

                                              Hi Joel,

                                               

                                              This is fantastic, so I made some modifications to the code to add in some comma seperators in the Impressions and Uniques. Now the only thing left to do is figure out how to tie the animation demo to the Ad Calculaton demo. I have tried just copying an pasting the code and while the adds animation, it screws up the formulas. Here is the code I have so far: http://dl.dropbox.com/u/9159616/AdCalc3.zip

                                               

                                              Any chance you can explain how to implment the animation into the ad calculator?

                                               

                                              Thanks again for all your help. You have no idea how much I am learning from all of this.

                                               

                                              Adam

                                              • 20. Re: Using Greensock
                                                joel_pau Level 5

                                                This code:

                                                $("form").on( "input", function () {

                                                                var CPM = $("#CPM").val();

                                                                var budget = $("#budget").val();

                                                                var freq = $("#freq").val();

                                                               var impressions = Math.round(budget/CPM * 1000);

                                                               var uniques = Math.round(impressions/freq);

                                                               var CPU = parseFloat(budget / uniques);

                                                               CPU = CPU.toFixed(2);

                                                               var imp = new String(impressions)

                                                               imp = imp.replace(/(\d)(?=(\d{3})+$)/g, '$1,');

                                                               var uni = new String(uniques);

                                                               uni = uni.replace(/(\d)(?=(\d{3})+$)/g, '$1,');

                                                               $("#impressions").html('$'+imp);

                                                               $("#uniques").html('$'+uni);

                                                               $("#CPU").html('$'+CPU);

                                                });

                                                 

                                                returns:

                                                formDollarComma.jpg

                                                 

                                                 

                                                "Any chance you can explain how to implment the animation into the ad calculator?"

                                                Yes, i will try to implement: The animation starts as soon as you left number input.

                                                Because other animation bugs

                                                • 22. Re: Using Greensock
                                                  Dam4222 Level 1

                                                  Hey Joel,

                                                   

                                                  Wow, what can I say it looks great. Its hard to believe how much actually goes into this. I would have never figured that out, thank you so much.

                                                   

                                                  Adam

                                                  • 23. Re: Using Greensock
                                                    Dam4222 Level 1

                                                    Hi Joel,

                                                     

                                                    Sorry two more questions: 1) How can I remove the dollar sign from the Impressions and Monthly Uniques (those are not dollar figures)? 2) Whenever I try to save the project as another file name, the animation seems to break?

                                                     

                                                    Thanks again!

                                                     

                                                    Adam

                                                    • 24. Re: Using Greensock
                                                      joel_pau Level 5

                                                      1) Dollar issue.

                                                      New files: https://www.box.com/s/3djdkx8paxdilocpyiq4

                                                      new lines:

                                                      //displaying values

                                                      $("#impressions").html(imp);

                                                      $("#uniques").html(uni);

                                                      ...

                                                      TweenLite.to(obj, 1, {setTextVal: endVal, ease: Power2.easeInOut, onComplete: function(){$("#"+outputName).html(outputVar);} });

                                                      ...

                                                      goAnimate("CPU", "freq", CPU, "$"+cpu);

                                                       

                                                      2) "Whenever I try to save the project as another file name, the animation seems to break?"

                                                      Well, I don't know. Greensock folder is required.

                                                      • 25. Re: Using Greensock
                                                        Dam4222 Level 1

                                                        Hi Joel,

                                                         

                                                        Ahh ok that makes sense. And yes you are correct about the Greensock folder! my bad.

                                                         

                                                        Thanks again this is really coming along.

                                                         

                                                        Adam

                                                        • 26. Re: Using Greensock
                                                          joel_pau Level 5

                                                          New version: "cost per unique" is now correctly animated.

                                                          https://www.box.com/s/siwqujk8g3elb2d4dded

                                                          • 27. Re: Using Greensock
                                                            joel_pau Level 5

                                                            At last but not least: ultimate version.

                                                            1) The errors are not displayed (Nan, Infinity),

                                                            2) Once you enter a number, the animation starts.

                                                            ==> https://www.box.com/s/ew3av87h6kajxcghlfel

                                                            • 28. Re: Using Greensock
                                                              Dam4222 Level 1

                                                              Hey Joel,

                                                               

                                                              I cant thank you enough for your help with this. I learned a ton from this project.

                                                               

                                                              Adam