Jump to content
Search Community

ram0409

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by ram0409

    Spinning Wheel SVG

    in GSAP

    Posted

    Hi, I am trying to create a spinning wheel with 14 elements and it doesn't work. Here is my html code

     

    <!DOCTYPE html>
    <html >
    <head>
      <meta charset="UTF-8">
      <title>Spinning wheel with svg text</title>
      <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
          <section class="full-screen">
            <div class="wheel-03">
                <svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1"
                     width="800" height="400"
                     viewBox="0 0 800 400">
                    <g transform="translate(0,0)">
                        <g transform="translate(0,250)" class="wheel-container">
                            <text x="0" y="-225" class="term term00">SMELL</text>
                        ...
                      
                    </g>
                </svg>
            </div>
        </section>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>

        <script src="js/index.js"></script>

    </body>
    </html>

     

     

    And here is my js code

     

    $(window).load(function () {
     
          var term01 = $('.wheel-03 .term01');
        var term02 = $('.wheel-03 .term02');
        var term03 = $('.wheel-03 .term03');
        var term04 = $('.wheel-03 .term04');
    ...

        var stepFrame = 1

     
          // css classes
        tl01 = new TimelineLite();
        tl01
        ...

        
        
        
        
        tl14 = new TimelineLite();
        

    ...


        .to(term26, stepFrame, {

                attr: {y: '-=75'},
                ease: Linear.easeNone
            })
        ; */

        var wheelTurn = 0.3;

        wheel03 = new TimelineMax({repeat: 50, timeScale: 3});
        wheel03.add(tl01, 0);
        
     ...
        wheel03.add(tl26, 0);
        wheel03.play();

        TweenMax.to(wheel03, 0.1, {timeScale: 10, ease: Circ.easeOut})
        TweenMax.to(wheel03, 4.9, {timeScale: 5, delay: 5, ease: Circ.easeOut})
    });

     

    Edited by moderator to remove tons of code and prevent scroll injuries

×
×
  • Create New...