인프런 커뮤니티 질문&답변

스크롤 이미지 영역 넘어갈시 가로가 움직여서 여러개의 이미지영역이 보이는게 안되여ㅠㅠ

선생님 완성본 02.html도 안되는거같아요

css

@charset 'utf-8';

html, body, h1, h2, h3, h4, h5, h6, p, blockquote, code, img, dl, dt, dd, ol, ul, li, fieldset, legend, caption { margin: 0; padding: 0; border: 0; }
div, span, article, section, header, footer, p, ul, li, fieldset, legend, label, a, nav, h1, h2, h3 { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, li { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; }

html {
	font-size: 20px;
	font-family: Roboto;
	line-height: 1.6;
}

body {
	background: dodgerblue;
}

.wrap{
	contain: paint;
}

.para {
  padding: 1em;
  font-size: 50px;
}

.gallery{
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	width:350vw;
	max-width: 4000px;
	height: 100vh;
	border: 10px dashed deeppink;
}

.gallery-item{
	width:70vw;
	max-width: 800px;
	flex-shrink: 0;
}

.gallery-timeline{
	height:2000px;
	border:10px dashed mediumaquamarine;
}

02.js

import './scroll-timeline.js'

const gallery = document.querySelector('.gallery');
const galleryTimeline = document.querySelector('.gallery-timeline');

gallery.animate(
    [
        {transform : 'translayeX(0)'},
        {transform : 'translayeX(-100%)'}
    ],
    {
        fill : 'both',
        timeline : new ScrollTimeline ({
            scrollOffsets : [
                {target : galleryTimeline, edge : 'start' , threshold : 1},
                {target : galleryTimeline, edge : 'end' , threshold : 1}
            ]
        })
    }  
);