Simple Pinned Header Jumping About

[wilsxt]

I am trying to swap over from ScrollMagic to your lovely ScrollTrigger plugin, but I ran into an issue pretty quickly. I have very little JavaScript experience, but I am trying to learn! So forgive me if I have made obvious mistakes. 

I want to have a simple pinned header so I can trigger some animations inside of it on scroll, I just want it pinned for a little bit then it moves to reveal the page content. 

I had this working in ScrollMagic, and I am close here, but I get this janky bouncing around when it moves past/or back up to the trigger. 

Check it out here: Staging Site

I tried searching around a bit, and tried a few things with no luck. 

Here is my JS: 

let st = ScrollTrigger.create({
        trigger: ".trigger",
        pin: true,
        start: "top top",
        end: "+=500",
  			anticipatePin: 1,
  			scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
      })

console.log(st.pin); // pin element (not selector text)

I basically pulled it from the documentation for pinning and messed around with it a bit. It doesn't seem like any of my changes helped though. 

Thanks for the help and I really appreciate any advice!

[ZachSaucier]

Hey wilsxt and welcome to the GreenSock forums. Can you please create a minimal demo of the issue using something like CodePen?

[wilsxt]

Sure thing. I don't do much HTML these days but I was able to quickly cobble something together.

This example seems to be working fine though, I am not getting the big jumps I see on my staging site.

It might be something obvious, but I am not really sure where to look since MagicScroll sort of "just worked" for this use case. 

 

See the Pen KKNJyrP by wils-tierney (@wils-tierney) on CodePen

[ZachSaucier]

It looks like you're using some sort of smooth scrolling script on your site. If you're doing that, you should hook ScrollTrigger up to it using .scrollerProxy(). 

[wilsxt]

Yeah, that was my first instinct as well. 

I had turned it off and tested and it didn't seem to make a difference so I had just flipped it back on. 

It is off now and still getting the issue for the moment after clearing my cache. 

 

Thanks for the help so far, I do appreciate it. Let me know if you have any other ideas. 

[akapowl]

 

Hey @wilsxt

 

It looks like you have some transitions for transforms set to the container you are pinning, which cause the jumping of the section (on leave and on enterback). Disabling  those transitions seems to have resolved the jumpiness for me.

 

 

 

 

 

Edit: 

You can observe the same behaviour in your codepen demo when adding transitions to the .header in your CSS.

 

See the Pen 4195b68d50c378ade05e379ae1a233c8 by akapowl (@akapowl) on CodePen

 

 

[wilsxt]

19 hours ago, akapowl said:

 

Hey @wilsxt

 

It looks like you have some transitions for transforms set to the container you are pinning, which cause the jumping of the section (on leave and on enterback). Disabling  those transitions seems to have resolved the jumpiness for me.

 

 

Wow! Thank you so much. I believe those are default settings for transitions to be in inherited by elements down the line which are being added by my WordPress theme, and I probably never would of found that myself. I do go poke around in Dev Tools myself, but I looked over those since they are always lurking around. Next time I will just uncheck everything until it works. 

Thanks again. I really appreciate the help, and for someone who doesn't come from a coding background and is just learning it makes a huge difference. 

I'll probably be back. I already started working on giving my portfolio some horizontal sliding love and it is totally janky, but I think I will bang my head against it for a while first and see what I can figure out!