Scroll Trigger - Orientation change

[darkgr33n]

Hey all,

 

I'm trying to cope with orientation changes. 
On a reload everything works as expected, but on an orientation change, not so much.

 

I've read through a fair few examples, and have tweaked my code after reading @ZachSaucier 's animating efficiently, but to no avail.

The real page has a number of components, but the codepen demo just shows one to try and keep the code minimal. There can be any number of these components, in any position on the page, so I basically loop through the <section> tags and see what class "component" they hold, and then build the scroll trigger then and there so they're always built in order.

The orientation function seems to be firing correctly.

 

I've tried a number of different methods to kill the trigger, clearProps etc, but can't see where I'm going wrong.

 

Any ideas on what I can do to try and make sure the triggers are built afresh after an orientation change ?

 

Cheers!

See the Pen qBaaBvZ by darkgr33n (@darkgr33n) on CodePen

[ZachSaucier]

Hey darkgr33n. I'm glad you learned from my article  

 

Here are some steps you can continue taking to debug this further: 

• Strip out irrelevant parts. Do you really need the smooth scrolling bit still in there to recreate the issue? I'm guessing not. Check all of your code to see if it's related.
• Use the dev tools to see what styles are messed up when the orientation is changed. What's putting those styles there? Then try and figure out how you can get rid of them/reset things properly.

If you have a specific question about GSAP please ask and we'll do our best to help  

[darkgr33n]

Thanks Zach, good shout.

 

I've removed ASScroll and some of the styling. I think I'm only left with relevant bits

 

I'd been looking at dev tools, and one difference I could see was within the pin-spacing attributes, but I hadn't looked too closely as I assumed that was a symptom of me doing something stupid! As it would appear on first look that I'm not doing anything obviously wrong, I can see that when the orientation fires and rebuild the spacing, it seems to miss the padding on the pin-spacer class. The declared height is always off by the missing padding amount.

An updated demo without scrolling is here: 

See the Pen KKggWWj by darkgr33n (@darkgr33n) on CodePen

 

I've run through two test cycles, one for each (landscape/portrait), beginning with an initial reload in one orientation, then doing the rotation, and then rotating back again. 

 

I don't know if it's helpful, but the code below shows the differences on each test cycle (and i've removed all other code not affected, so its just the initial few classes).

 

 

<!--  

LANDSCAPE TEST (667 x 375)

Initial reload 

-->

<div class="container-fluid">

	<div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 650px; height: 736px; padding: 0px 0px 260px;">

		<div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 475.5px; height: 475.5px; padding: 0px;">

			<div class="col-7 p-0 all-vh cmpnt--page-split--image">
				<img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style="">
				<img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);">
			</div>
			

<!-- *ROTATE* to portrait (375 x 667) -->

<div class="container-fluid">

	<div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 358px; height: 771px; padding: 0px;">

		<div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); left: 0px; top: 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 771px; height: 771px; padding: 0px; box-sizing: border-box; position: fixed;">
			
			<div class="col-7 p-0 all-vh cmpnt--page-split--image">
				<img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style="">
				<img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 47.1429%) translate3d(0px, 0px, 0px);">
			</div>
			

<!-- *ROTATE* back to landscape (667 x 375) -->

<div class="container-fluid">
	
	<div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px -15px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 680px; height: 529px; padding: 0px;">
		
		<div class="row cmpnt--page-split " style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 505.531px; height: 505.531px; padding: 0px;">
			
			<div class="col-7 p-0 all-vh cmpnt--page-split--image">
				<img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style="">
				<img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);">
			</div>
			
			


<!--  

PORTRAIT TEST (375 x 667)

Initial reload 

-->


<div class="container-fluid">

	<div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 358px; height: 1056px; padding: 0px 0px 285px;">

		<div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 770.594px; height: 770.594px; padding: 0px;">

			<div class="col-7 p-0 all-vh cmpnt--page-split--image">
				<img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style="">
				<img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);">
			</div>
			
			
<!-- *ROTATE* to landscape (667 x 375) -->

<div class="container-fluid">
	
	<div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 650px; height: 476px; padding: 0px;">
		
		<div class="row cmpnt--page-split" style="transform: translate3d(0px, 681px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 475.5px; height: 475.5px; padding: 0px;">
		
			<div class="col-7 p-0 all-vh cmpnt--page-split--image">
				<img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style="">
				<img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);">
			</div>
		

<!-- *ROTATE* back to portrait (375 x 667) -->

<div class="container-fluid">
	
	<div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px -15px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 388px; height: 614px; padding: 0px;">
		
		<div class="row cmpnt--page-split " style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 614px; height: 614px; padding: 0px;">
			
			<div class="col-7 p-0 all-vh cmpnt--page-split--image">
				<img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style="">
				<img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);">
			</div>
			

That seems like a lot to look at!

 

In essence, taking the landscape test as an example, what I'm seeing is that:

 

on initial reload

 

<div class="pin-spacer

 

has

 

width: 650px; height: 736px; padding: 0px 0px 260px;"

 

on first rotation to portrait:

 

<div class="pin-spacer

 

has

 

width: 358px; height: 771px; padding: 0px;"

 

on second rotation back to landscape:

 

<div class="pin-spacer

 

has

 

width: 680px; height: 529px; padding: 0px;"

 

I guess i'm expecting that rotating back to landscape (assuming i'm rebuilding the triggers correctly) it should be the same.

Finally, looking at the portrait version I can see the pin-spacer above (first rotation) is different to how it appears on initial reload:

 

portrait on initial reload

 

<div class="pin-spacer

 

has

 

width: 358px; height: 1056px; padding: 0px 0px 285px;"

 

so I can see on initial reload (which works) height is 1056px with the 285 bottom padding, but if we rotate from landscape into portrait, there is no bottom padding added and so the height is off by that amount.
 

Maybe it's the way I'm handling the rotation, but the pin spacing seems to be different each time and i have no idea why!!

 

Cheers!

[ZachSaucier]

Good start. Keep going! Can you remove any more HTML, CSS, or JS? I think you can. It might help to actually remove it instead of just leaving things commented out.

 

One thought based on the info that you provided: Have you tried killing off the previous ScrollTrigger(s)? It doesn't look like you're doing that but you are attempting to create new ones...

[darkgr33n]

Thanks Zach,

 

I did try to kill of the ScrollTrigger but struggled a bit.

 

I can't use ScrollTrigger.getAll(); as there are other triggers I don't want to destroy.

In the end, i've used ScrollTrigger.getById('cmpnt__ps').kill(); in the example

(on the real page I'll have to list each trigger by ID, but there are only four).

 

I've trimmed the HTML/JS/CSS a bit too!

See the Pen bGwwKme by darkgr33n (@darkgr33n) on CodePen

 

But i'm still getting the same problem unfortunately.

Perhaps I'm not killing the trigger correctly ?

 

I wrapped it in a block to stop the undefined error, so:
if (ScrollTrigger.getById('cmpnt__ps')) {

}

and that seems to fire correctly - ie not on first load but after an orientation change.

 

does the killing look right ?

 

Cheers! 

[GreenSock]

I don't have time to look into this much right now, but based on a quick glance it looks like you're assigning the SAME id to multiple ScrollTriggers. That's not valid - just like in HTML, an id should be unique so that if you getById() you'll get the one you expect. Remember, getById() only returns ONE instance. 

 

If your goal is to kill all of those ScrollTriggers, you should probably keep track of them in an Array or something and loop through that to kill the ones you want. 

[ZachSaucier]

Another alternative to using IDs is to keep track of your ScrollTriggers in an array:

See the Pen wvzzxmr?editors=0010 by GreenSock (@GreenSock) on CodePen

[darkgr33n]

@GreenSock@ZachSaucier

Thanks Both!

 

I had considered the unique ID point previously, but had somehow forgotten the basics during the hunt for what was wrong!!

Many thanks, and love the ST array idea; I'll definitely use that going forward.

 

Quick coffee, then I'll implement.

 

Cheers!

[darkgr33n]

A quick update.

I implemented the changes above across the site, with smooth scrolling and various combinations of "components" and everything is working pretty damn well!! 

 

🥳

 

Thanks both for your help, much appreciated

 

Cheers!