Pinning not updating on window resize

[SWALKER]

I have an animation which uses pinning.
 

However it doesn't reset the pin positions on browser resize.

I have been at it for literally weeks now and have had no luck.

Annoyingly it works on my demo but not on my live site

https://staging-chfp.shereewalker.com/

Initially it looks fine, but when you actually open it on a mobile, it's completely breaks on screen orientation change. 

I think it might partly be caused by me hiding and displaying the animated section, but even at heights where this doesn't take effect, the markers are consistently off.

I have included the code for the animation that sits above (the expanding image) because I thought this might be the cause, but the demo STILL works.

 

I have had support on here before but nothing seems to work, so really all I am trying to do at  this point is kill it entirely, and re-add/calculate on browser resize.

But I can't even get this to work.

Any help would be greatly appreciated.

Note: You won't see the pinning unless you open the codepen link as the height is to small in this thread

See the Pen gOyxppY by shereewalker (@shereewalker) on CodePen

[Rodrigo]

Hi,

 

I think the issue is in your CSS actually but not the transition: all property that was being added, but in some of the media queries you have. I'm testing this on a screen that is 1600x900 pixels and the issue is not when you change the width of the screen but the height.

 

In this distribution everything works great regardless of the screen width:

The reported height of the result container in codepen is 516 px.

 

But in this disposition it doesn't work and the markers are at the top of the document:

The reported height in this one is 388 px, so you should look into the media queries you have in your setup and how that is affecting the document's flow.

 

Hopefully this helps.

Happy Tweening!

[SWALKER]

Hey there, the markers are still there I think because the section has display none, but hasn't actually been removed if that makes sense?

The heights works fine for me but not on mobile.

I sort of have it working with this.

 

// Function to invalidate and remake specific animations
  function invalidateAndRemakeAnimations() {
	// Kill the first animation
	ScrollTrigger.getAll().forEach(trigger => {
	  if (trigger.vars.trigger === ".row._1") {
		trigger.kill();
	  }
	});
  
	// Remake the first animation
	gsap.to(".row._1", {
	  scrollTrigger: {
		trigger: ".row._1",
		start: "top top",
		scrub: true,
		pin: true,
		pinSpacing: false,
		invalidateOnRefresh: true,
		markers: true
	  }
	});
  
	// Kill the second animation
	ScrollTrigger.getAll().forEach(trigger => {
	  if (trigger.vars.trigger === ".row._3") {
		trigger.kill();
	  }
	});
  
	// Remake the second animation
	gsap.to("h2.text", {
	  scrollTrigger: {
		trigger: ".row._3",
		start: "top top",
		scrub: true,
		invalidateOnRefresh: true
	  },
	  position: "relative"
	});
  }
  
  // Initial application of animations
  invalidateAndRemakeAnimations();
  
  // Listen for orientation change event
  window.addEventListener("orientationchange", function() {
	// When orientation changes, invalidate and remake specific animations
	invalidateAndRemakeAnimations();
  });

I have no doubt this is not an elegant solution but I don't really know what else to do - even this doesn't really reset them properly on Safari

The media queries will definitely change the document height, but I thought Scrolltrigger automatically calculated on resize.

The only other thing I could find was in the common mistakes about 'forgetting to use function based start/end values for things that are dependent on viewport sizing' but I can't work out how to implement it.


 

[SWALKER]

Right, so I have gone as far now as to remove ALL my styles, including media queries, stripped out any extra content, including headers and footers, removed any JS and any other GSAP code.

 

Right now I have a Wordpress page with nothing on it but a very basic pinned section.

BUT you an still see that when orientating from landscape to portrait, that it breaks. The Pin Spacer does not adjust it's width and height, it still has the dimensions of the landscape version and the pin start and end does not update.

I even removed all the parent styles but no dice. At this point I am wondering if this is a bug?

When you look at the codepen on fullscreen in dev tools, it breaks too, so I do have a broken demo of sorts.

Now I know that dev tools behaviour is not always accurate (at least in my experience) BUT it does behave the same on an actual mobile device.  Sometimes it takes a few orientations, sometimes it does it straight away and looks an absolute mess.

Here is a screenshot from both the staging site and the codpen

[Rodrigo]

Hi,

 

I still think that this is related to something you're adding on the HTML/CSS of your project (or maybe wordpress is). I forked your demo and stripped all the CSS that wasn't need, the bare minimum, and is working as expected on my android phone on orientation change:

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

 

Here is the debug view (no iframes, just like a regular website)

https://cdpn.io/pen/debug/MWRzJJV

 

If you check that link on a small screen and flip the orientation you'll see that the pinning works as expected. That gives me more ground to state that this is not a GSAP related issue, but something else in your setup that is causing this.

 

Hopefully this helps.

Happy Tweening!

[SWALKER]

Hey there - if you open your codepen in dev tools and change the orientation, you'll see it breaks, same as my codepen which I stripped back (I also took a backup then stripped my website right back to practically nothing) 

the way it looks in dev tools is the same as it looks on my phone for both mine and your codepen and my stripped back site (though I have since restored the backup)

The screenshot below is your codepen.

I have just rebuilt the entire thing without pinning and it still does the same, it's a bit better, but the start and end pins are still way off on orientation change.
 

[SWALKER]

This is on my actual phone after going back to portrait with your codepen.

Sometimes it doesn't, sometimes it takes a few tries, but sometimes it's on first orientation. It's killing me! I'm considering trying to switch to just JS

[Rodrigo]

This is the debug link on devtools:

https://i.imgur.com/CvJDG6V.mp4

 

I'm seeing exactly the same on an android (chrome-firefox) phone and iPad (chrome-safari) 🤷‍♂️

 

Sorry but I can't seem to replicate the problem you mention.

 

Happy Tweening!

[SWALKER]

Yeah I don't know what I'll do. Ill maybe have to try JS as this is what i see on my ipad (excuse the state of it, I have a 3 year old!)