Jump to content
Search Community

Jumpy Pinned Section

Matthew Meaklim test
Moderator Tag

Go to solution Solved by Matthew Meaklim,

Recommended Posts

Hello,

 

I decided to try add Barba JS into my project and got most things working as normal.

 

On first load, everything is fine, but if I navigate from home to somewhere else, and back again, once I scroll to a pinned section, things get a little funky.

 

The pinned section seems to pin okay, but on scroll it moves vertically and horizontally - I've left markers on for now.

 

I can't create a simple CodePen as can't use Barba in it, but if you go here, https://ilimitado.studio/, then go to any other page and back to home again, when you scroll down and hit the horizontally pinned section, you'll see the weirdness first-hand.

 

I've tried "anticipatePin: 1" and "invalidateOnRefresh: true" but no joy.

 

In case it matters, I'm using GSAP 3.11.1 and am killing my ScrollTriggers (or so I think) using "ScrollTrigger.getAll().forEach(t => t.kill());" before reinitialising them - also tried "ScrollTrigger.killAll();" as seen it was added in the 3.11 release but still no luck. In Barbas once (on first page load) and beforeEnter (before the new view loads) I'm calling my custom JS in the exact same order/way - hence why I can't figure out what the difference is or why one jumps and one doesn't.

 

P.S. I know you can't debug a project this size, but thought I'd post in case it's something daft I've done/missed.

 

Thanks,

 

Matthew

Link to comment
Share on other sites

Hi,

 

Right now I can’t test in my computer, only on tablet where there is no horizontal section.

 

The few recommendations I can give you is to update to 3.11.5 and perhaps try GSAP Context to wrap all your GSAP and ScrollTrigger instances for easy cleanup when changing the routes using the revert method:

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally in stackblitz you can create a pure html project with different pages 

 

https://stackblitz.com/?starters=frontend
 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi Rodrigo,

 

Apologies, should have said that the section is only present from 1024px and up.

 

I tried that but still not playing ball - assuming of course that creating a global variable called ctx, wrapping my pinned section in "ctx = gsap.context(() => { ... });", and then calling "ctx.kill()" beforeEnter is the correct implementation.

 

By process of elimination, I was able to determine that this code "scroller.on('scroll', ScrollTrigger.update);" is what's making things work on first load. It is called again when moving between pages, but only seems to work correctly when you first land on the website.

 

P.S. If I remove that line, I get the strange jumpy behaviour from the get go.

 

Thanks,

 

Matthew

Edited by Matthew Meaklim
Additional Information
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...