Jump to content
Search Community

reverse Gsap event with timeline Gsap 3.0 and higher

Lichay test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

@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. 

  • Like 4
Link to comment
Share on other sites

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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 :-) 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...