ram0409
ram0409's Achievements
0
Reputation
-
Thanks Carl, But i could not understand what you have said. Can you please elaborate?
-
Here is the live link. Please provide me the solution.
-
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