[Inertia stopped working after update]

Thanks a ton! I came down with a bad cold after posting, but I was able to try your fix today and it worked instantly. Saved me a ton of time poking around. 

I figured it was something like that, but I was a bit confused because I was going out of my way to try to get GSAP to load first. I guess because I had Inertia hosted locally it was always being loaded before CDN, even though I had set them to load in a different order. Now I know!

 

Thanks again I really appreciate the help. Enjoy your weekend!

[Inertia stopped working after update]

Hey Greensock Forums, 

I wanted to add ScrollToPlugin to fix some anchor links on my site, and I noticed GSAP had updated from 3.6 to 3.7.1. 

So, I went ahead and updated all my CDN links in my functions.php file. I also downloaded a fresh version of InertiaPlugin and replaced my old copies on my server. 

Afterwards, everything was working except the IntertiaPlugin I had set up on my Dragable portfolio cards: https://www.bestfootforward.business/#portfolio
 

I can still drag it. I just don't have inertia any more even though it is set to true. 

 

It looks to me like the InertiaPlugin is being loaded in after GSAP with no issue, so I am a bit perplexed as to why my inertia is broken now. I tried doing a few searches and looking through the release notes with no luck. 

I know... CodePen... I have done it in the past, but I am hoping maybe there is an obvious issue you are familiar with first. If I have to I can copy and paste my JS over there though. Knowing my luck it will probably work fine in CodePen! 

Thanks a ton for the help.

[Simple Pinned Header Jumping About]

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!

[Simple Pinned Header Jumping About]

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. 

[Simple Pinned Header Jumping About]

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

[Simple Pinned Header Jumping About]

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!