Scroll trigger and button click animation

[TaiwoJazz]

In the minimal demo i provided, i think i'm confused at this junction
What am i trying to implement?
1. I have two buttons and once i scroll to the page, the first item should animate
2. On clicking on the button, i want to quickly reverse the first animation then play the animation for the next button clicked (Note: While reversing the first animation before playing the second animation, IF I HAVE TO WAIT FOR THE SAME DURATION TO REVERSE OUT, then i will not reverse it i will just kill it and move to the next animation of the clicked button.

I created a useWhyChooseAnimations hook to handle the logic then pass the clicked button to it. This is to ensure that my code is clean as i will have over 8 buttons in the main code

There is a minimal demo using codesandbox

Would really appreciate all the help i can get now. Thanks guys.

[Rodrigo]

Hi,

 

I read your questions a few times and looked at the example you provided and I'm not sure I follow what you're trying to do here.

 

I understand that creating a custom hook is a good solution for re-usability and keeping your code clean, especially if you have a bunch of elements, but in this case it might be getting in the way.

 

I noticed that you're not using GSAP Context in your hook, but that doesn't make any difference whatsoever. The problem I kind of see is that everytime you click on a button you're adding more and more ScrollTrigger instances, so the cleanup phase of your custom hook is definitely not working, not even when using GSAP Context to revert everything. Maybe the components are not being unmounted or the cleanup of the hook is just not running at all.

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

As I said I had a hard time following what you're trying to do and I'm still not clear about it. I know is not the ideal situation but I would start without the hook and then once you have everything working as you expect, I'd start abstracting things in order to create a cleaner solution. It is good that you're starting with just two elements. Maybe instead of a hook a re-usable component could be enough.

 

If would greatly help if you could create a simpler example with just simple components in order to find out what the issue could be.

 

Sorry I can't be of more assistance.

Happy Tweening!

[TaiwoJazz]

Hi @Rodrigo
Thanks for the response.. Here is a refactor of the minimal demo
Here i have removed the custom hook and i made use of GSAP context and this got the scroll trigger working but when i click on the Multi Chain Support button, nothing happens. The animation is not working.

On clicking on the button, i want to quickly reverse the first animation then play the animation for the next button clicked (Note: While reversing the first animation before playing the second animation, IF I HAVE TO WAIT FOR THE SAME DURATION TO REVERSE OUT, then i will not reverse it i will just kill it and move to the next animation of the clicked button.

Also, in my other app built with nextjs, i'm finding it difficult to register ScrollTrigger there. It will be nice if you could provide me with a snippet. Thanks.

[TaiwoJazz]

@Rodrigo Could you take a look please

[Rodrigo]

Hi,

 

Sorry about the response time, but as you can see we have a very active forum with lots of questions to go through and we do our best to answer everything within 24 hours.

 

Regarding your latest demo the issue is in the component itself. Basically you have this in your effect hook:

useEffect(() => {
  gsap.set("#animate", { opacity: 1 });
  let ctx;

  ctx = gsap.context(() => {
    tl.current = gsap
      .timeline({
      defaults: { opacity: 0 }
    })
      .from("#whyChooseItems h2", { y: 100, duration: 1, ease: "back" })
      .from("#whyChooseItems p", { y: 100, duration: 1, ease: "back" });
  }, chooseRef);

  return () => ctx.revert();
}, []);

And this in your JSX:

<div ref={chooseRef} className="">
  <div>
    <h2 className="">Multi Chain Support</h2>
    <p className="">
      Our goal at VastFluid is to become the leading player on major
      blockchain platforms. We strive to offer a seamless and unified
      trading experience across multiple blockchain networks, providing
      users with the ability to easily and efficiently trade assets without
      the need for intermediaries.
    </p>
  </div>
</div>

As you can see there is no element with the ID whyChooseItems in it, so GSAP doesn't find the targets you're passing to the timeline instances.

 

This seems to work the way you expect:

useEffect(() => {
  gsap.set("#animate", { opacity: 1 });
  let ctx;

  ctx = gsap.context(() => {
    tl.current = gsap
      .timeline({
      defaults: { opacity: 0 }
    })
      .from("h2", { y: 100, duration: 1, ease: "back" })
      .from("p", { y: 100, duration: 1, ease: "back" });
  }, chooseRef);

  return () => ctx.revert();
}, []);

Keep in mind that since you're using GSAP Context, the ref you're passing as scope is enough, so GSAP will look for those selectors only within that particular scope, so it's safe to assume that nothing outside that will be selected.

 

Finally you created this other thread:

Is that related to this one? If so let us know so we can delete it and keep our focus just in this one.

 

Hopefully this helps.

Happy Tweening!

[TaiwoJazz]

Thanks a lot and i really appreciate the help. The seconds thread is related to this one. please delete it. So sorry about that.

 

[Rodrigo]

6 minutes ago, TaiwoJazz said:

So sorry about that.

No problemo!