Need help getting logo to transition to the nav using GSAP Flip

[calebr]

I'm working on a site and am wanting the logo to transition into the navbar on scroll.

For some reason I've been running into a lot of bugs and can't get it to work correctly. Any help would be appreciated. I was originally trying to get it to work using a scrolltrigger scrub animation but that was having even more issues.

The site is here: https://lvly-tv.webflow.io/

and the code I'm using is below:

Any help would be appreciated. 

  const homeLogoScroll = function () {
    const logo = document.querySelector('.hero_home_logo');
    // const logoChildren = logo.querySelectorAll('*');
    const heroLogoWrap = document.querySelector('.hero_home_logo_wrap');
    const navLogoWrap = document.querySelector('.nav_logo');
    const heroSection = document.querySelector('.hero_home_wrap');
    
    if (!logo || !heroLogoWrap || !navLogoWrap) return;
    
    const updateLogo = function (moveToHero = false) {
      let state = Flip.getState(logo, { nested: true });
      //move element
      if (moveToHero) {
        heroLogoWrap.insertAdjacentElement('beforeend', logo);
      } else {
        navLogoWrap.insertAdjacentElement('beforeend', logo);
      }
      // animate element
      Flip.from(state, {
        absolute: true,
        // scale: true,
        duration: 0.6,
        ease: 'power1.inOut',
      });
    };
    updateLogo(true);
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: heroSection,
        start: 'center 45%',
        end: 'bottom 100%',
        scrub: true,
        markers: false,
        onEnter: () => {
          updateLogo(false);
        },
        onEnterBack: () => {
          updateLogo(true);
        },
      },
    });
  };

 

[Cassie]

Hey! 

I popped your code into a demo and it seems to be working fine - all I did was change the order of the hero/nav FLIP calls as it was incorrect.

See the Pen ByBovLW by GreenSock (@GreenSock) on CodePen.

If that doesn't help - Here's another couple of demos showing how to approach this sort of thing - Scrubbed flips are a little complex as they require cleanup/reinstating on browser resize.

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen.

See the Pen mdPvzxJ by GreenSock (@GreenSock) on CodePen.

[calebr]

Hey Cassie,

 

Thanks for the help - upon some further inspection I realized the issue wasn't with my code setup as much as with a confliction with lenis smooth scroll. For some reason when I scroll back to the top of the page the logo is jumping by the amount I scrolled down the page (above the viewport) before animating back into the hero, but when I turn off lenis it works fine. I already have the below code to try to keep lenis and gsap in sync but it seems to not be working. Any chance you've run into this issue before or know any other workarounds? (No worries if not, I know external libraries can be their own beast to work with).

 

You can see the current iteration with the lenis issue here: (https://lvly-tv.webflow.io/). Glad to know I can just remove lenis if need be but would prefer to not have to do that. Do you know if I used the GSAP scrollsmoother instead, would prevent this issue from happening?

 

// Keep lenis and scrolltrigger in sync

lenis.on('scroll', () => {

if (!ScrollTrigger) return;

ScrollTrigger.update();

});

 

On a separate note - do you have any tips on how to handle code cleanup and re-instating on browser resize? I couldn't find any sample code on the flip page and have been unsure on the best way to approach this. 
Would something like this be sufficient?
 

//kill flips on browser resize

let windowWidth = window.innerWidth;

window.addEventListener('resize', function () {

if (window.innerWidth !== windowWidth) {

windowWidth = window.innerWidth;

//input code you want run after the browser width is changed

Flip.killFlipsOf(logo);

}

});

 

[Cassie]

Hey! The demo I provided after saying that has the recommended solution in. Sorry for not being clear there

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen.

(It's only needed for scrubbed flip animations, like that specific use case shows)

 

I can't debug by looking at a live site I'm afraid, that's why we ask for codepen links here! I would suggest forking my pen above, adding lenis and testing

Looks like ScrollSmoother works a ok though.

See the Pen LEPGEqp by GreenSock (@GreenSock) on CodePen.