wilsxt Posted March 12, 2021 Share Posted March 12, 2021 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 Hey wilsxt and welcome to the GreenSock forums. Can you please create a minimal demo of the issue using something like CodePen? 1 Link to comment Share on other sites More sharing options...
wilsxt Posted March 12, 2021 Author Share Posted March 12, 2021 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 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(). 1 Link to comment Share on other sites More sharing options...
wilsxt Posted March 12, 2021 Author Share Posted March 12, 2021 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. Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 12, 2021 Solution Share Posted March 12, 2021 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 2 Link to comment Share on other sites More sharing options...
wilsxt Posted March 13, 2021 Author Share Posted March 13, 2021 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now