3 Replies Latest reply on Jan 19, 2015 9:29 AM by TimJaramillo

    Can We Rotate Separate Elements With A Click (Jquery)

    Branching-Out-Europe

      Hi guys,

       

      I'm trying to create an interactive dial. It contains three layers. Ideally I'd like the end-user to be able to drag each seperate layer of the dial and it rotate each seperate element at 60 degrees on each drag.

       

      Alternatively, I'd like each separate element (the different layers in grey below), once clicked, to rotate 60 degrees.

       

      So far I've been able to rotate each element on a click once, but I'm unable to solve how to make this happen over and over with each click.

       

      Here's my stage code:

      (function ($) {

          $.fn.rotate = function(degree, maxDegree) {

              //...

          };

      }(jQuery)); // <-- call

       

      Here's my element code:

      sym.$( "_2dial" ).animate({"bottom": "60px"},

      {

                duration:2000,

         step: function( now, fx ){

            sym.$("_2dial").css ({"-moz-transform":"rotate("+now+"deg)",

                        "-webkit-transform":"rotate("+now+"deg)",

                        "-ms-transform":"rotate("+now+"deg)",

                        "-o-transform":"rotate("+now+"deg)"});

                  }

      },'linear');

       

      My file can be downloaded here:

      http://www.filedropper.com/edge-dial-files

       

      Thanks for the help.

       

      Here's the dial. I'd like each of the grey circles to rotate seperatly on click (each segment will have text on it).

       

      dialedge.png

        • 1. Re: Can We Rotate Separate Elements With A Click (Jquery)
          TimJaramillo Level 4

          Hi there,

           

          I posted an example of dragging a wheel, and snapping to points towards the bottom of the page in the link below. It's 2 years old, but the math hasn't changed since then. I would also highly recommend using GSAP for all code-based animation, rather than jQuery animate. You can download GSAP here: GreenSock | GSAP. And you can import the code from Edge's Scripts panel. If you master the GSAP library, your life will change for the better!

           

          Scrubbing a wheel and turning a pot with Edge Animate!

           

          Example:

          http://www.timjaramillo.com/code/edge/drag_rotate/test.html

           

          Source:

          www.timjaramillo.com/code/edge/_source/drag_rotate_wheel.zip

           

           

          Regarding the click-rotation not working, I would start by moving all functional code to the Stage.compositionReady event (instead of keeping this code on each dial. Reason being that on each click event, your values are being overwritten. In my psuedo code example below, on click of a dial, you'd call a "rotateDial1", "rotateDial2" func (create a function for each dial), etc, that you'd create in the Stage.compositionReady event. This function would track/set your rotation var for each wheel.


          Psuedo code:

           

          // add to Stage.compositionReady event --

           

          var _dialRotationAmount = 60;// angle you want to rotate on each click

           

          var _rotationDial1 = 60;// track rotation for dial 1. Make a variable for each of your dials

           

          // called on click event of dial 1. Make a function for each of your dials, change values inside function to match your dial #

          sym.rotateDial1 = function(){

               // add to rotation value

               _rotationDial1 += _dialRotationAmount;

              

               // rotate dial

               var _dial1Symbol = sym.$("_1dial");

               TweenMax.to(_dial1Symbol, 1, {rotation:_rotationDial1, ease:Power1.easeOut});

          }

          • 2. Re: Can We Rotate Separate Elements With A Click (Jquery)
            Branching-Out-Europe Level 1

            Tim, thank you for your help! I spent a long time trying to get my head around what would be needed to achieve this, I'll let you know how I get on.

             

            Really appreciate the help!

             

            - Scott.