画像フェードイン時のレイアウト崩れについて

【実現したいこと】
cssとjqueryでスクロール時に画像を横からフェードインしたい。（レイアウト崩れなしで）
translateで右にずらし、所定の位置までスクロールするとtranslateを(0,0)にしています。

【うまくいかないこと】
translateで右にずらした時にレイアウト崩れがおきます。
（ヘッダーとトップ画像が右にずらしている画像の分広がる）

解決策をご教授お願いできますでしょうか。
よろしくお願いします。

html
1<!-- ********** ヘッダー ********** -->
2<header>
3	<div class="header">
4		<div class="telCon">
5			<img src="image/xxx.png" alt="">
6		</div>
7		<div class="logoCon">
8			<h1>
9				<img src="image/xxx.png" alt="">
10			</h1>
11		</div>
12		<div id="menuWrapper">
13			<a id="menuButton"><span>text</span></a>
14		</div>
15	</div>
16	<div class="topImgCon">
17		<img src="image/xxx.jpg" alt="" class="topImg">
18		<img src="image/xxx.jpg" alt="" class="topImg">
19		<img src="image/xxx.jpg" alt="" class="topImg">
20	</div>
21</header>
22<!-- ********** フェードインする画像があるセクション ********** -->
23<section>
24		<div class="plspyCon">
25			<div class="plspyBack"></div>
26			<h2>
27				<span class="plspyJpttl">text</span>
28				<span class="plspyEngttl">text</span>
29			</h2>
30			<div class="plspyLogoCon">
31				<img src="" alt="">
32			</div>
33			<div class="plspyTextCon">
34				<p>
35					text
36				</p>
37			</div>
38			<div class="plspyImgCon fadeRight">
39                <!-- フェードインする画像 -->
40				<img src="image/xxx.jpg" alt="">
41			</div>
42		</div>
43	</section>

css
1.header {
2	background: #ffffff;
3	width: 100%;
4	height: 80px;
5	display: -webkit-flex;
6	display: -ms-flex;
7	display: flex;
8	justify-content: space-between;
9	-ms-align-items: center;
10	align-items: center;
11	position: fixed;
12	z-index: 9999;
13}
14.telCon {
15	padding-left: 18px;
16}
17.telCon img {
18	width: 40px;
19}
20.logoCon img {
21	width: 120px;
22	display: -webkit-flex;
23	display: -ms-flex;
24	display: flex;
25}
26.topImgCon {
27	position: relative;
28	padding-top: 80px;
29}
30.topImg {
31	width: 100%;
32  object-fit: cover;
33	position: absolute;
34	transition: 2.5s;
35	z-index: -9999;
36}
37/* --- フェードイン用 --- */
38.fadeRight {
39	opacity : 0;
40	transform : translate(100px, 0px);
41	transition : .8s;
42}
43.fadeScroll {
44	opacity : 1;
45	transform : translate(0, 0);
46}

js
1  //フェードイン
2  $(function(){
3      $('.fadeRight').each(function(){
4        let elemPos = $(this).offset().top; //要素の位置を取得
5        let elemPosFade = elemPos + 200; //開始位置をずらす
6        let scroll = $(window).scrollTop(); //スクロール位置を取得
7        let windowHeight = $(window).height(); //ウィンドウの高さを取得
8        if (scroll > elemPosFade - windowHeight){
9          $(this).addClass('fadeScroll');
10        }
11      });
12    });
13  });
14