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.
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.
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.
Best practice creating a spinning wheel with svg text
in GSAP
Posted
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:
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:
In the end I had to set up the master timeline for the wheel like this:
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