lordrhodos

Hi all, I am new to the greensocks family and its libraries and I am very impressed how easy it is to build beautiful animations. I have read already a lot in this forum, but I need some advice or hints what would be the best practice approach to set up a spinning wheel based on some inline svg text. I wanted to add a screenshot what I want to achieve but struggled with the upload form and published this entry all ready. I am going to edit it now I basically have five words below each other, where the one in the center (position 3 when counting from the top) is the highlighted word and the other four words get some kind of softer design (color, opacity). The spinning wheel should spin from bottom to top and after the fifth word a sixth and seven word comes into view at the bottom. So it is always five words visible and a total of seven words. Words that go out of view in the top should be come into view at the bottom again. My approach to simulate this is to set up an inline svg file allowing one whole spin from the center word "BRAND" and than repeating this without the yoyo effect. Here is the svg: <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> <text x="0" y="-150" class="term term01">HELL</text> <text x="0" y="-75" class="term term02">SHOCK</text> <text x="0" y="0" class="term term03">BRAND</text> <text x="0" y="75" class="term term04">COOL</text> <text x="0" y="150" class="term term05">NICE</text> <text x="0" y="225" class="term term06">EYE</text> <text x="0" y="300" class="term term07">SMELL</text> <text x="0" y="375" class="term term08">HELL</text> <text x="0" y="450" class="term term09">SHOCK</text> <text x="0" y="525" class="term term10">BRAND</text> <text x="0" y="600" class="term term11">COOL</text> <text x="0" y="675" class="term term12">NICE</text> <text x="0" y="750" class="term term13">EYE</text> </g> </g> </svg> Since the words which are not in the center should have a different opacity setting I came up with a timeline for each word and a .to() animation for each transition to the next word position. This is the timeline for one (!) word out of 13: tl05 = new TimelineLite(); tl05 .to(term05, stepFrame, { css: {className: 'term term04'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css: {className: 'term term03'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css: {className: 'term term02'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css: {className: 'term term01'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css:{className: 'term term00'}, attr: {y: '-=75'}, ease: Linear.easeNone }); In the end I had to set up the master timeline for the wheel like this: wheel03 = new TimelineMax({repeat: 20}); wheel03.add(tl01, 0); wheel03.add(tl02, 0); wheel03.add(tl03, 0); wheel03.add(tl04, 0); wheel03.add(tl05, 0); wheel03.add(tl06, 0); wheel03.add(tl07, 0); wheel03.add(tl08, 0); wheel03.add(tl09, 0); wheel03.add(tl10, 0); wheel03.add(tl11, 0); wheel03.add(tl12, 0); wheel03.play(); TweenMax.to(wheel03, 0.1, {timeScale: 8, ease: Circ.easeOut}) TweenMax.to(wheel03, 4.9, {timeScale: 0, delay: 6, ease: Circ.easeOut}) I know I could write a custom function to have the timelines for the words etc. created dynamically, but as this is just a proof of concept and I am a total newbie I am wondering if you could give me a hint to a better / best practice approach I am thankful for any advice or tips what I can do better. Thanks and best regards Patrick