Scrolltrigger.observe - Where to put code for individual animation

[KwabenaOwusu]

Hey All,

Thanks for your time.

 

Scenario: I am using a Scrolltrigger.observe example I found in this forum and want to modify it slightly.

 

Issue1:  I think any animation code should be in function gotoPanel.

But somehow simple animations are broken, once they run twice or three times.

 

Issue 2: How to I reverse animations if code goes into function gotoPanel part instead of creating an animation and linking that animation to the Scrolltrigger  ( e.g. if I move H1 in a panel to right. Right now animations stay in their new state

  /* EXAMPLE ANIMATION */
  let panelHeading = target.querySelector("h1");
  gsap.to(panelHeading, { color: "red" });

 

Any hints?

 

Thanks very much in advance

See the Pen jOXVdEK?editors=1111 by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Rodrigo]

Hi,

 

I'm a bit confused about what the issue is here. What exactly are you trying to achieve? ScrollTrigger and Observer wise, everything is working as expected and I don't see any errors in the code or the browser's console, maybe I'm missing something here 🤷‍♂️

 

Happy Tweening!

[KwabenaOwusu]

@Rodrigo Thanks very much.

I was trying to find out for example how to reverse the animation in this case.

 

So far I am only familiar with ToggleActions or onLeave etc.

 

 

[Rodrigo]

Hi,

 

I'm still unsure of what you're trying to do, but based on the example you have maybe use the same conditional logic you have in place:

gsap.to(target, {
  yPercent: isScrollingDown ? -100 : 0,
  duration: 0.75
});

/* EXAMPLE ANIMATION */
let panelHeading = target.querySelector("h1");
gsap.to(panelHeading, {
  color: isScrollingDown ? "red" : "white",
});

Hopefully this helps. If you keep having issues please be super specific about what you're trying to do and if possible share a link of a similar behaviour.

Happy Tweening!

[KwabenaOwusu]

@Rodrigo : Thanks very much. That is the solution I was looking for.