Search the Community

this is my first attempt using GSAP (it seemed to be the best animation library I could find). I'm trying to create a simple slot machine. Here is a codepen with the minimal amount of code. http://codepen.io/dax006/pen/LGoNrE It does 3 things. After creating a random symbol, it 1) creates a 'constantly spinning' tween and saves it 2) creates a 'slowing' tween and saves it 3) resets the progress of each tween/symbol to be 1/4th down the screen. Bug/problem #1 - Tweens are playing yet NOWHERE do I play() the tween. The tweens are PAUSED by default. Even if they are not paused, I IMMEDIATELY pause() them in resetslot(). Problem #2 - Progress() does not seem to be setting all symbols accurately (you can immediately see that the top symbol is askew) Problem #3 - Setting a tweens progress() to zero triggers its onComplete (watch the console) Problem #4 - Setting a tweens progress to 1 triggers its onComplete even though I have SuppressEvents:true (watch the console) I'm very frustrated with GSAP at the moment . Any help is appreciated -John Edit:problem 5 can't pause the codepen demo so can't read console

Greetings everyone! Thank you for taking the time to read my question. I am using TweenLite and TimelineLite to create an animation timeline that simulates a user navigating a set of "sections". When the user clicks a button, I create a tween that animates a percent value over the course of 0.3 seconds. On "update" of this tween, the "progress" of my timeline is set using TimelineLite.progress(x). My issue is that if one of the sections is tweened for another reason to a different position on screen, when the timeline is progressed, the section immediately snaps back to where the timeline wants it, based on the original creation. What I would like is that the position of the section would tween from it's new, updated position, to the endpoint defined in the timeline. Is this possible? Here is some pseudo-code that should help illustrate my question. var percentObj = { current: 0 }; var myTimeline = new TimelineLite(); // ---------- // Set starting positions myTimeline.add( TweenLite.set($('#section1'), { 'css': { 'y': 0 } }), TweenLite.set($('#section2'), { 'css': { 'y': 1000 } }), TweenLite.set($('#section3'), { 'css': { 'y': 1000 } }) ); // ---------- // Now that starting values are set, // pause the timeline myTimeline.pause(); // ---------- // Create future animations that // will be triggered by the user // Animate to section2 myTimeline.add( TweenLite.to($('#section2', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // Animate to section3 myTimeline.add( TweenLite.to($('#section3', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // ==================== function buttonClick() { TweenLite.to(percentObj, 0.3, { 'current': 0.5, 'onUpdate': updateProgress } } function updateProgress() { myTimeline.progress(percentObj.current); }