Order of animation when changing position & width

[Yiddy]

I am new to GSAP & have been playing around & failing. Chatgpt was not much help either.

 

I am trying to get the searchbar to change the width while outside the navbar which works well when scrolling down however when scrolling back up the width changes before the position changes.

See the Pen Exzyyxx by yiddy (@yiddy) on CodePen

[mvaneijgen]

Hi @Yiddy welcome to the forum!

 

I'm not sure what your onUpdate code is doing, to me it also seems really wasteful to do new calculation on each tick. The onLeave and onLeaveBack seems perfect and it already changes its width on reparenting, so why add more complexity? If you want more to happen Flip just returns a tween, so you can add that to a timeline if you want with tl.add(myFlipAnimation) and do more on that timeline.

 

Also normally people add an animation to a ScrollTrigger and then ScrollTrigger plays or reverses the animation. Your setup works, but in theory it is creating a new animation each time you scroll up and down. Hope it helps and happy tweening! 

 

See the Pen dyEXVqo?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[Yiddy]

Thank you @mvaneijgen. Originally the code was much shorter & on update was not there. I was just trying many different things (without being sure when to use what in GSAP) and some things were added unnecessarily & removed over many different revisions hence why I made sure to add comments to everything as this was just me trying all different things.

 

Your version seems to work perfectly I will check later when I am at my PC to make sure but it seems to be exactly what I am looking for. Many thanks.

 

[Yiddy]

@mvaneijgen I checked it now on my pc & while removing the onUpdate definitely resolves the issue with the order (for some reason it wasnt working well until I removed padding fromt he search-container which you also removed however I dont understand why that made a difference) Another issue arises now that the search-container pinning is not working well. It doesnt get pinned below the navbar now It gets pinned to its original position when the page loads. I wanted it to be pinned just below the navbar during the animation both when going into the nav-search-container & out.

Also for some reason there are start & and markers throughout the whole height of the page. Why is it not just at the top?

Edit: the issue seems to be related to the input tag not being closed. The fact that the start & end markers were showing many times throught the page was actually what made me think to look for that lol.

Edited May 23 by Yiddy
Mistake was on my end

[Yiddy]

Turns out the issue is still there but only when resizing the width. I am not sure why. 😕

[Rodrigo]

Hi,

 

I'm not 100% sure I fully understand what's going on here and unfortunately I don't have a lot of time to dig into this and try to create a demo of my approach.

 

I forked Mitchel's great demo and added this little bit to it:

// Function to setup ScrollTrigger
let st;
function setupScrollTrigger() {
  const { navWidth, containerWidth, navbarHeight } = calculateDimensions(); // Get dimensions
  st && st.kill();

  // Create a ScrollTrigger instance
  st = ScrollTrigger.create({
    trigger: searchContainer,
    start: `top top+=${navbarHeight}`,
    end: `bottom top`,
    pin: searchContainer,
    pinSpacing: false,
    scrub: true, // There is no animation connected to ScrollTrigger, so this does noething
    onLeave: () => {...},
    onLeaveBack: () => {...}
  });
}

And it seems to be working as expected:

See the Pen BaezENM by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!