Iamattamai Posted November 17, 2019 Share Posted November 17, 2019 Sorry, I couldn't get CodePen to play this snippet so I had to host it myself here: https://www.eyedea.co/imgtest.html I suspect the base64 images were too big for it to process. Anyway, could someone tell me why I am getting three different behaviors at the end of this short animation? If you refresh it, you can alternately get a blank screen, arms down, or suddenly arms up - which is the last image in the series. My preference would be for it to come to rest with arms down. I cannot understand why the arms suddenly jump up at the end. I've tried every combination to stop it and I can think of and toyed with immediateRender but still get this unpredictable behavior. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 17, 2019 Share Posted November 17, 2019 Hey Iamattamai, The following function seems to work to put the arms down for me: function armDown() { tt = gsap.timeline() tt .to(".g06", {duration: 0, visibility: 'visible', stagger: -.05}) .to(".g06", {duration: 0, visibility: 'hidden', stagger: -.05},.05) .to(imageList[0], {visibility:'visible'},"-=.01") }; To use reverse you'd need to create the timeline then go to .progress(1) and then .reverse() it. 2 Link to comment Share on other sites More sharing options...
Iamattamai Posted November 17, 2019 Author Share Posted November 17, 2019 8 minutes ago, ZachSaucier said: Hey Iamattamai, The following function seems to work to put the arms down for me: function armDown() { tt = gsap.timeline() tt .to(".g06", {duration: 0, visibility: 'visible', stagger: -.05}) .to(".g06", {duration: 0, visibility: 'hidden', stagger: -.05},.05) .to(imageList[0], {visibility:'visible'},"-=.01") }; To use reverse you'd need to create the timeline then go to .progress(1) and then .reverse() it. Thank you ZachSaucier, that seems to work. I don't understand the prior behavior, but will settle for any solution that works after hours of frustration. Link to comment Share on other sites More sharing options...
GreenSock Posted November 17, 2019 Share Posted November 17, 2019 I haven't had a chance to dig into your example much, but I did notice that you forgot to return the timeline instances in your functions, so all you're doing in your master timeline is firing off function calls (not really building a master timeline with embedded animations). This might be better, and it'd allow you to control the entire thing as a whole: var tlmaster = gsap.timeline(); tlmaster.add(armUp()) .add(armDown()); function armUp() { var tt = gsap.timeline(); tt.to(".g06", {duration: 0, visibility: 'visible', stagger: .05}) .to(".g06", {duration: 0, visibility: 'hidden', stagger: .05},.05) .to(imageList[imageList.length-1], {visibility:'visible'},"-=.01"); return tt; }; function armDown() { var tt = gsap.timeline(); tt.set(imageList[imageList.length-1], {visibility:'hidden'}) .to(".g06", {duration: 0, visibility: 'visible', stagger: .05}) .to(".g06", {duration: 0, visibility: 'hidden', stagger: .05},.05); return tt; }; That's not tested code - I'm just showing the concept. You had a reverse() call in there that could be a bit more complicated to replicate but not impossible. Anyway, it sounds like Zach got you what you needed, right? 2 Link to comment Share on other sites More sharing options...
Iamattamai Posted November 18, 2019 Author Share Posted November 18, 2019 (edited) Yes, Zach got me working. Thank you for the tip on the return - that might help going forward. I missed that in the documentation. Could explain a lot of things. BTW, this forum ROCKS - everyone is so responsive and helpful - even on a Sunday - and follow-up is amazing. Edited November 18, 2019 by Iamattamai kudos 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now