Jump to content

Search the Community

Showing results for tags 'speed control timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


  • FAQ


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


  • CodePen Challenges

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 1 result

  1. Hello Everyone: I have created 52 playing cards, and placed them at the same X position outside the stage. The 52 playing cards mc are stored in the currentDeck[] table. Using a TimelineMax, I make these cards scroll from right to left at a high speed. When the app user hits a button, the overall scrolling speed will decrease, until everything stops. The card in the center of screen will be the card the user gets from this "lottery wheel". //Creating the "slower" variable, that will let me slow down later my animation/timeline. public var slower:Number=1 ; //Let's create now the Timeline that will rapidly scroll 52 cards horizontally on the screen from right to left in an infinite loop. //Cards are spaced so that, at any time, there are three cards displayed on screen. tl = new TimelineMax({repeat:-1, repeatDelay:0}); for (var j:int=0; j<52; j++) { tl.to(currentDeck[j], 0.5, {x:finalX, ease:Linear.easeNone} , "-=0.35"); } //Now, when the user hits the button, the srolling should slow down then stop //This will be achieved by tweening the "slower" value from 1 to 0 public function slowerThenStopBtn_handler(e:MouseEvent) { TweenMax.to(this, 2, {slower:0, onUpdate:changeDuration, onComplete: postRalenti}); } //Each new value of "slower" is then re-injected in my running timeline public function changeDuration() { tl.timeScale(slower); } public function postRalenti() { tl.stop(); } Now this code works, but it's not perfect. Question 1: EaseOut before the scrolling stops. Is there a way to get a Bounce.easeOut easing on the scrolling animation before it stops? This will enforce the "lottery wheel" effect. I tried to apply the EaseOut easing on the tweening of "slower" variable, but it doesn't give the expected result. Question 2: Continuous loop illusion. When the last card #52 scrolls out of the screen, the screen is empty for a split second before the loops starts again and card #1 appears on screen. How can I make cards #1 & #2 starts scrolling earlier so that 3 cards are always displayed, even at the end of the first loop. Trying to set repeatDelay:-0.35 makes the last card #52 disappear suddenly from screen while scrolling, which ruins the continuous loop illusion. Question 3: Outcome of the lottery wheel. Now by slightly changing the duration of the tween of the "slower" variable, I can manage to make a specific card to end up at the center of screen when scrolling stops. Is there a more precise and smarter way to do so? Well, thanks a lot and kudos to Greensock for such fun and useful products!!! Best regards.