GSAP 3

[PREVOST Sylvain]

Hi guys !

I'm having fun testing Highway, this is easy to set up 👍

However, i tried to reproduce your transition example (https://highway.js.org/examples/transitions.html) with the new GSAP v3. I'm having some issue with it... i don't know exactly if it's a GSAP or Highway related issue... 😅

This code doesn't fire done function

// File: fade.js
import Highway from '@dogstudio/highway';
import { gsap } from 'gsap';

class Fade extends Highway.Transition {

  out({ from, done }) {

    // Fading out current content
    gsap.fromTo(from,
      { opacity: 1 },
      {
        opacity: 0,
        duration: 0.5,
        onComplete: done
      }
    );
  }

  in({ from, to, done }) {

    // Then Reset Scroll
    window.scrollTo(0, 0);

    // Remove Old View
    from.remove();

    // And finally shows up new content
    gsap.fromTo(to,
      { opacity: 0 },
      {
        opacity: 1,
        duration: 0.5,
        onComplete: done
      }
    );
  }

}

export default Fade;

I tried to add onCompleteParams: this on both methos (in / out), it works but i have some flickering when replacing/animating content.. It's a bit weird, it's not as smooth as gsap 2.1.3.

I think i'll stay with gsap 2.1.3 at the moment :D

Have a nice day 👋

[Josh Kirk]

GSAP 3 requires onComplete callbacks to be like so:

gsap.fromTo(to,
      { opacity: 0 },
      {
        opacity: 1,
        duration: 0.5,
        onComplete: () => { done() }
      }
    );

I haven't had time to research why yet 🤷‍♂️

[PREVOST Sylvain]

Yeah i tried this too of course. Same weird flickering start animation, it looks like a FOUC, maybe GSAP 3 changed something in the callbacks/events... but it would mean it's more a GSAP related issue :/

[Anthony Du Pont]

Hi @proov

Indeed, it seems it is an issue in the way you are using GSAP3 and not an issue related to Highway.
For this reason, I'm closing this issue.

[Sebastien Dehesdin]

Was having the same issue with FOUC, the way I solved was to add:
gsap.set(to, { opacity:0 }); before the from.remove();