GSAP 3
proov opened this issue Β· comments
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 π
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 π€·ββοΈ
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 :/
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.
Was having the same issue with FOUC, the way I solved was to add:
gsap.set(to, { opacity:0 });
before the from.remove();