Lichay Posted January 26, 2021 Share Posted January 26, 2021 it really hard to find something work on internet while all it Gsap 2.0 I am try to add some delay after animation finish and after some sec it will reverse to first start I read about savestyle but I want to use best way and short one. I try a lot of variant like '.delay(2).reverse();' or even .to(element, { delay:2,y:200 }); That work with delay but reverse doesn't work .to(element, { delay:2,reversed:true }); Thanks for your kindness and Good day See the Pen wvzVWaE by lichaytiram (@lichaytiram) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 Hey Lichay. Again you have multiple things going wrong. I highly recommend spending more time reading the docs and trying to understand existing demos to try and get a firmer understanding of how things work in GSAP. As it is, asking us every single question that you have is much slower than learning how to properly read the docs. It will save you time to learn how to properly use the docs. Your mistakes: It doesn't make much sense to apply a ScrollTrigger to a timeline that is created on click. You should probably remove the ScrollTrigger. Applying .delay() to a timeline like what you're doing just adds a starting delay to the timeline, as the docs specify. Applying .reverse() to a timeline like what you're doing immediately reverses a timeline, as the docs specify. Since you're creating a new animation each time, after the first completion your animation won't do anything visually. Most likely you should either reuse the same animation or use .fromTo() instead. I highly recommend actually reading and understanding my article about animating efficiently. There are a lot of ways of reversing a timeline after a delay. You could add an empty tween of the duration that you want to the end and then apply repeat: 1 and yoyo: true to it. Or you could use a .delayedCall() to call .reverse() on the timeline in the timeline's onComplete. Or other ways. Please make sure to thoroughly go through the relevant documentation before posting to our forums so that you can save both our time and your own time. 3 hours ago, Lichay said: it really hard to find something work on internet while all it Gsap 2.0 GSAP 2 has the exact same logic as GSAP 3, only the syntax has been changed in some ways. By following the migration guide you should be able to update any GSAP 2 demo to GSAP 3 with ease. 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 26, 2021 Author Share Posted January 26, 2021 2 hours ago, ZachSaucier said: Hey Lichay. Again you have multiple things going wrong. I highly recommend spending more time reading the docs and trying to understand existing demos to try and get a firmer understanding of how things work in GSAP. As it is, asking us every single question that you have is much slower than learning how to properly read the docs. It will save you time to learn how to properly use the docs. Your mistakes: It doesn't make much sense to apply a ScrollTrigger to a timeline that is created on click. You should probably remove the ScrollTrigger. Applying .delay() to a timeline like what you're doing just adds a starting delay to the timeline, as the docs specify. Applying .reverse() to a timeline like what you're doing immediately reverses a timeline, as the docs specify. Since you're creating a new animation each time, after the first completion your animation won't do anything visually. Most likely you should either reuse the same animation or use .fromTo() instead. I highly recommend actually reading and understanding my article about animating efficiently. There are a lot of ways of reversing a timeline after a delay. You could add an empty tween of the duration that you want to the end and then apply repeat: 1 and yoyo: true to it. Or you could use a .delayedCall() to call .reverse() on the timeline in the timeline's onComplete. Or other ways. Please make sure to thoroughly go through the relevant documentation before posting to our forums so that you can save both our time and your own time. GSAP 2 has the exact same logic as GSAP 3, only the syntax has been changed in some ways. By following the migration guide you should be able to update any GSAP 2 demo to GSAP 3 with ease. It not working i saw the doc before I update the link to see all options and nothing work if you know how to achieve it with some diff ways it be perfect i want to know about them because i try everything and it don't work Thanks. Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted January 26, 2021 Solution Share Posted January 26, 2021 Hi @Lichay, I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay: gsap.to(element, { y: 200, scale: 1.3, repeat: 1, yoyo: true, repeatDelay: 2, }); 4 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 26, 2021 Share Posted January 26, 2021 @Lichay you have been asked many, many, many times to provide a minimal demo that clearly shows the issue in context. You did that in your original post (thank you!), but then Zach provided you a list of problems that he noticed in your code. If you want help, you must provide an updated demo (maybe fork the old one) and clearly explain what isn't working the way you'd expect. When you keep coming back with a simple "I tried everything...it doesn't work" that doesn't allow us to see where you mis-applied the fixes or what other issues exist in your code. We have burned quite a few hours trying to bend over backwards to help you (almost 140 posts now), but if you continue to refuse to provide the information we request yet ask vague questions and insist the problems are due to "bugs" in GSAP, you'll wear out your welcome here and we'll need to close your account. I'd really hate to do that. We genuinely want to help. 4 Link to comment Share on other sites More sharing options...
mikel Posted January 26, 2021 Share Posted January 26, 2021 Hey @Lichay, How do you move a carrot from right to left and some delay back again. Here is an attempt, a little experiment. See the Pen qBaePZe by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Lichay Posted January 26, 2021 Author Share Posted January 26, 2021 1 hour ago, elegantseagulls said: Hi @Lichay, I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay: gsap.to(element, { y: 200, scale: 1.3, repeat: 1, yoyo: true, repeatDelay: 2, }); Thanks it really work Link to comment Share on other sites More sharing options...
Lichay Posted January 26, 2021 Author Share Posted January 26, 2021 1 hour ago, GreenSock said: @Lichay you have been asked many, many, many times to provide a minimal demo that clearly shows the issue in context. You did that in your original post (thank you!), but then Zach provided you a list of problems that he noticed in your code. If you want help, you must provide an updated demo (maybe fork the old one) and clearly explain what isn't working the way you'd expect. When you keep coming back with a simple "I tried everything...it doesn't work" that doesn't allow us to see where you mis-applied the fixes or what other issues exist in your code. We have burned quite a few hours trying to bend over backwards to help you (almost 140 posts now), but if you continue to refuse to provide the information we request yet ask vague questions and insist the problems are due to "bugs" in GSAP, you'll wear out your welcome here and we'll need to close your account. I'd really hate to do that. We genuinely want to help. in last time really was bugs. anyway in that post i post code and more with codepen and I read doc and nothing help me 3 links from ZachSaucier don't help me for this situation but it work by elegantseagulls comment do the job well anyway Thanks for help. Link to comment Share on other sites More sharing options...
GreenSock Posted January 26, 2021 Share Posted January 26, 2021 56 minutes ago, Lichay said: in last time really was bugs. Can you please be more specific? Where was the confirmed bug? Link to comment Share on other sites More sharing options...
Lichay Posted January 27, 2021 Author Share Posted January 27, 2021 9 hours ago, GreenSock said: Can you please be more specific? Where was the confirmed bug? on my post with pining + data speed Link to comment Share on other sites More sharing options...
GreenSock Posted January 27, 2021 Share Posted January 27, 2021 51 minutes ago, Lichay said: on my post with pining + data speed Can you please provide a link to where the bug was confirmed? I've glanced at most of your threads (not all 141 posts) and in every single case that I've seen, the problem was in your code, not a bug in GSAP. But maybe I missed something, so I'd appreciate it if you could provide a link or some evidence of this "bug". I definitely want to make sure any bugs are fixed. If you're referencing this thread... ...You kept claiming it was a bug but that was incorrect - the problems were all logic issues in your code and you never provided substantiation for your claims. I asked over and over again for a minimal demo and clear description but you posted a link to Apple's web site which wasn't helpful. Perhaps I missed something, though, in which case I want to get things clarified and resolved. At this point, there are zero confirmed bugs from any of your threads. 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 27, 2021 Author Share Posted January 27, 2021 1 hour ago, GreenSock said: Can you please provide a link to where the bug was confirmed? I've glanced at most of your threads (not all 141 posts) and in every single case that I've seen, the problem was in your code, not a bug in GSAP. But maybe I missed something, so I'd appreciate it if you could provide a link or some evidence of this "bug". I definitely want to make sure any bugs are fixed. If you're referencing this thread... ...You kept claiming it was a bug but that was incorrect - the problems were all logic issues in your code and you never provided substantiation for your claims. I asked over and over again for a minimal demo and clear description but you posted a link to Apple's web site which wasn't helpful. Perhaps I missed something, though, in which case I want to get things clarified and resolved. At this point, there are zero confirmed bugs from any of your threads. it hard to find the bug I work on that last week and give up. anyway see this https://codesandbox.io/s/compassionate-morning-ofq3w?file=/src/app/app.component.ts after click it isn't yoyo well, sometimes it just stay without yoyo. (click on some bottoms + on same bottom and see my issue) Link to comment Share on other sites More sharing options...
mikel Posted January 27, 2021 Share Posted January 27, 2021 Hey @Lichay, You have already received several tips on this case (its a logic issue): tips-for-writing-animation-code-efficiently, Most Common GSAP Mistakes Here are two options how to do it See the Pen MWjNRGv by mikeK (@mikeK) on CodePen See the Pen XWjvwRo by mikeK (@mikeK) on CodePen Why do you combine a click event with ScrollTrigger? What do you expect? Happy tweening ... Mikel 3 1 Link to comment Share on other sites More sharing options...
mikel Posted January 27, 2021 Share Posted January 27, 2021 Hey @Lichay, Did you understand the logic of the two variants? 4 Link to comment Share on other sites More sharing options...
Lichay Posted January 28, 2021 Author Share Posted January 28, 2021 On 1/27/2021 at 3:06 PM, mikel said: Hey @Lichay, Did you understand the logic of the two variants? yes very nice solutions. The first solution do some problem fromTo => from for your example only have scale:0 and my example have more then one value so need convert some (number)deg css value to 'skew:number value' so it can be a difficulty to get full match but it really nice solution for another problem. and your second solution perfectly match to my example anyway I am glad for both solution and Thanks you :-) 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