Search the Community

First of all let me say it's a pleasure finding out about GreenSock and I am looking forward integrating your products (Blitmask and TweenMax) to my projects. THE SITUATION IS AS FOLLOWS: I am making a video slot machine games. 4 rows x 5 columns. Each column represents a Blipmask object. I have 5 BIG elements strips (about 42 elements on the strip) and I use Blitmask(blitmask has dimensions width of element x (4 x height of element) and TweenMax to scroll them. 1st column stops after it traveled the distance of 12 elements, 2nd column stops after it traveled the distance of 17 elements and each column after that, 5 elements added. The last column stop after it travelled 32 elements MY PROBLEM: 1) I want as soon as SPIN button is pressed, the 5 blitmasks to start spinning at the same speed 2) At the end of each tween I want a bouce effect that uses only a few frames for it (regardless of the duration of the tween). I am using frames in my tween as duration parameter. So for example the 1st column runs for 100 frames, I want the bounce effect to be the last 10 frames. For the last column that runs let's say X frames I still want the bounce effect to be 10 frames. So easing out to be irrelevant of duration. 3) I want the bouncing/easeOut to be sudden and not smooth. I prefer minimal deacelleration in the end (Imagine a real world slot machine - it stops very sudden) 4) Finally, I want the sliding speed to be the same for all columns. I adjust the duration accordingly to make sure that the stopping of columns will happen at regular intervals. I tried many easing out techniques but nothing seems to work and satisfy ALL the above requirements. If anyone has some suggestions please feel free to help. Thank you for reading this and trying to help

Hello to all of you greensockers... I need help,i am new to the world of Greensock. So, I need all these functionalities that I currently have. But I need to start the wheel from a certain number and stop it at a certain number? And not from the certain time point,as it is now. Thanks...

Hello guys, I was working on some animation for my client and I found the issue with rotateY which I'm unable to implement. Can you guys please check and let me know if there is any solution to this? I've checked few forum topics and did see the solution below shared by you guys. It suggests to use scaleX but element is not a symmetrical element so I need it actually be flipped and I don't think I can use it as a separate SVG as well. By the way storyline is as follow (store guy filling crate to a van): store guy goes near the van crate is left there (hide crate) store guy come back to the crate laying outside the store picks another crate repeat until there is no crate So can you guys please check and let me know if there is any solution to this? Thank you for checking in. Abi Rana

Dear All, Let me say that this is post I posted on the AS3/Flash forum but I guess the same principles apply here as well. I will just 'convert' the answer/logic to AS3 code if possible. First let me thank you for any help you can provide and let me explain what the situation is like: I have a number of elements/symbols/bitmaps that I set up on my flash stage (there can be as many as 30 elements) I place the first 5 on stage one under another and the rest outside the stage, on top, so I create the rolling effect. I have an array that I save all the element names in so I know which element is next etc. Currently I construct the spin using Timelinemax and I spin it User sees the first 5 elements and then it spins until the last 5 elements which I bounce a bit on finish ( I will provide the AS3 code after) Quote Here is when I need YOUR help. The user will be able to press a STOP button. Meaning I would like to shorten the animation in this way: Let's say the number of elements is 30. And the user presses STOP when the animation is showing elements 10-15. I want AS3 to insert at elements 16-20 my ORIGINAL last 5 elements (so basically elements 26-30). So the animation remains smooth and it stops at the same elements as it would stop if the user has not pressed STOP Basically I would like to shorten the animation strip and replace the last 5 elements to match my original 5 elements. I do not want to jump to the end of the 30 element animation because then the elements on stage (10-15) will change to elements #20-25 and the user will see this. In a more visual way, to understand better: My original strip is 1,2,3,4,5,...,26,27,28,29,30 Strip starts animating User presses STOP when on stage you see elements 10,11,12,13,14,15 Animation now how to reconstruct the strip like this: 1,2,3,4,...,15,26,27,28,29,30 So after element 15, it will be element 26 and animation will get ready to stop I hope I made the problem clear, it has been bugging me a lot lately to find a solution and I hope someone can help me from this forum. If you need more information please let me know Thank you again.

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

Hello First i would like to thank you for sharing the amazing and useful Greensock. I am trying to create an animated slot machine, and i tried to use a carousel slider shared on a forum topic (the following link http://codepen.io/bassta/pen/LckBh) since Blitmask is only avaliable for AS. It doesn't seem to be the best solution. I would like to know if i can achieve the slot machine effect with TweenMax, with a Blitmask's similar effect.