Search the Community
Showing results for tags 'nav logo'.
Found 1 result
-
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); }, }, }); };
