Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lordrhodos

Best practice creating a spinning wheel with svg text

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

See the Pen LpNqLN by lordrhodos (@lordrhodos) on CodePen

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×