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