1 Reply Latest reply on Feb 5, 2015 3:27 AM by Marsseats

    First little steps with Greensock

    Marsseats Level 1

      Schermafdruk 2015-02-05 11.04.55.jpg

       

      Hello,

      i'm trying to translate/remake Edge banners by Greensock/javascript,

      to get them smoother, quicker and easier to edit.

       

      I'm happy with the first steps..

      but some things are hard yet..

       

      Finally i want to make weekly banners with a heading,

      with our sofas and a weekly price.

       

      I just put some basic things in Edge

       

      in compositionsReady

      i'v linked the objects to a var name.

      and under that the lines for the transformation...this works.

       

      see below

       

      But i want to specify the locations and the time

      the locations where the sofas (4x) come from and go and also the price...

      ( i can make something with tweenLite.to    ....a delay....and then another tweenLIte.to or .from? )

      after that : sym.play(0); ( to repeat)

       

      I can make transformations for all the items...with a delay

      but is that how it must be done? ( maybe tweenMax with stagger is better? )

       

      And voor de items ster25 / ster30 / ster40 can i group them?

      I thought in a css...but the only thing that looked like css is index.edge.js? is that the one?

       

       

       

       

       

      // insert code to be run when the composition is fully loaded here

      var myWheel = sym.$("RoundRect");

      var rect = sym.$("rect");

      var bank1z2 = sym.$("alexis2bruin_250px");

      var bank1z3 = sym.$("alexis3bruin_250px");

      var ster25 = sym.$("ster25");

      var ster30 = sym.$("ster30");

      var ster40 = sym.$("ster40");

       

       

      TweenLite.fromTo(myWheel, 1, {x:0}, {x:100});

      TweenLite.to(rect, 2, {rotation:90});

      TweenMax.from(ster25, 0.5, {opacity:100, y:300, rotation:360});

       

      Hope to hear a second step...

      greet marcel