7 Replies Latest reply on Dec 13, 2014 10:43 AM by joel_pau

    Animating Variable length TEXT from JSON in Edge Animate [v 2014.1.1]

    justincode Level 1

      Hi all..

       

      I'm currently converting HTML & CSS & JAVASCRIPT code into Edge Animate so i can have more fun with my little project, Basically re-designing it in Adobe Edge

       

      On one part of the Edge Composition information displays on screen that is grabbed from a JSON encoded PHP file, this data retrieved is variable in length.. It could be 10 characters wide or 30 characters wide. Depending on the total length of the characters I choose weather to animate the text from left to right (just like a marquee)...

       

       

      It is important for me to explain here what to expect from this animation.

      Example:

      We have a 100PX wide rectangle. If the json data is less than the width of the rectangle then then text should be stationary and justified left.

      If the json data is more than the width of the rectangle then the animation would proceed as follows.

       

      START: justify text to the left and hide text to the right that spills over the edge of the right hand side of the rectange.

      ANIMATE:move the text to the left untill the end of the text reaches the right hand side of the rectangle, then move back to the start position and loop.

       

       

      Back when I had the project in HTML & CSS & JAVASCRIPT I would drop the JSON encoded data into DIVs, then toggle the class of the DIV depending on then length of the data. If the parents ("outerDiv")  width was less than then data then the CSS .animate class would take over, otherwise it would default to CSS .noAnimate


      This is how it was done.

       

       

      1: The JavaScript


      This is my JavaScript that loops through the results of the JSON encoded PHP data. (I have omitted lots of the results in the code below to make it easier to read)

       

      function playlistupdate (list)
      {
      for (var i = 0 ; i != list.dbdata.length ; i++)
          {
              var song = list.dbdata[i];
         
          }
      {
          $("#list0title").html(list.dbdata[0].title);
      
      
      
      
      

       

      This part would check the width of the PARENT ("outer div") and see if it is LESS THAN the width of the JSON data. If it was it would use the class .animate instead of .noAnimate

       

      $('.noAnimate').each(function() {
          $(this).toggleClass('animate', $(this).parent().width() < $(this).width());
      });
      
      
      
      
      

       


      2: The CSS


      No Animation

      Here is the CSS if the data is less than the parent DIV width...

      .noAnimate {
          position:absolute;
          white-space:nowrap;
          overflow: hidden;
      }
      
      
      
      
      

       

       

      Animation

      Here is the CSS if the data is greater than the parent DIV width....(I have omitted the other browser compatibility's to make it easier to read)

      .animate {
          position:absolute;
          white-space:nowrap;
          overflow: hidden;
          -moz-animation: slidein 3s infinite linear alternate 1s;
          -webkit-animation: slidein 3s infinite linear alternate 1s;
          -o-animation: slidein 3s infinite linear alternate 1s;
          animation: slidein 3s infinite linear alternate 1s;
      }
      
      @-moz-keyframes slidein {
          from {
              -moz-transform:translateX(0);
          }
          to {
              -moz-transform:translateX(-100%) translateX(254px);  /* -100% + parent width */
          }
      }
      
      
      
      
      

       

      Pretty basic stuff and usefull if anyone wants to use it...

       

      3: The Problem


      Now onto the issues i face making the JSON data animate within my Edge Composition.

       

      As far as i understand it, Edge Animate will not allow animations outside of JQuery so the above CSS is basically usless.


      While i have no problem making a simple fade in for my JSON data like below (stored in the symbol "nowPlay" where i have put a keyframe opacity from 0% at zero seconds to 100% at two seconds im stumped as how to get started converting it to usable JQUERY


      for (var i = 0 ; i != list.dbdata.length ; i++)
          {
              var song = list.dbdata[i];
          }
      {
          sym.getSymbol("nowPlay").$("list0TitleContainer").html(list.dbdata[0].title);
          sym.getSymbol("nowPlay").play();
      ...continued
      
      
      
      
      


      This is at present way above my skill level and im praying one of you extremly clued up coders out there can help me make the transition.


      The end result if not completly understood is that if text width is less than outer container then do not animate left to right.. else if the text is wider then the outer div width then animate left to right.


      This is a personal project.


      I know its been a long read... if anybody can help shed some light please do........ if not  i hope some of the above CSS could be helpfull for people.



      many many thanks... Justin.