?? ??? ??? ???? ? ????. ??? ??? ??????. ? ??? ??? ???? ?? ?? ????. ??? ?? ???? ?????? ?? ???? ? ??? ? ????. ? ?? ??? ?? ???, ?? ??? ???? ?? ?? ????? "???"?? ???? ???????.

?? ? ??? ????? ??,? ?? ?? ???? ???????. ????? ??? ???? ???? ?? ???? ? ??.

?? ? ??? ???? ? ????? ??????. ??? ?? ?? ??? ??? ?? ??????.

?? ?? ??? ?? ??? ??? ??? ?? ? ?? ??????. ??? ??? ???? ?? ?? ??? Apple“Cover Flow”??? ?? ?? ???? ??????. ??????

??? ????? ?? ? ?? ??? ?? ??? ????? ????? ?? ????? ??“??? ? ??”? ???? ???? JavaScript?? ?????. ?? Greensock? Scrolltrigger? ?? ??? ??. ?? ? ??? ? ????. ?? ???? ???? ?? ??? ???? ???? ?? ??? ???? ?? ? ?????. "??"? "??"??? ?? ???? ?? ?????. ???? ? ? ??? ?? ???? ?????.

??? Greensock ???? ??? ???? ?????. ?? ??? ??? ???? ? ??? ?????? ?? ?? ?? ?????! ??? ???? ??? ??????. ??? ??, ?? ?? ?? ???? ??????. ?? ??????“???”??? ?????? ?? ????? ???? ????? ?? ?????. ?? ????. ??? ?? ?? ? ??? ??? ??? ???? ?? ?? ??? ??????.

?? ??? ??? ?? ?? ?? ??? ????.

???? ??? ??? ?? ??? ??? ??? ??? ???? ?? ??? ??? ??? ??? ????. ??? ?? ??? ??? ??? ???? ??? ?? (??? ??? ?? ??? ??)? ?? ??? ??? ?? (??? ??? ?? ???? ?? ? ??)? ?? ??? ?? ????? ??? (? : ? ???)? ?? ???????.

?? ??? ????? ????“as-is”? ????? ?????. ??? ??? ?? ?? ?? ???? ? ? ??? ?? ?? ??? ?? ? ????. ??? ??, ?? ?? ?? ?, ?? ??? ??? ???? ?? ????.

???? ?????

GSAP? ?? ???? ? ??? ?? ?? ?? ????? ? ? ??? ????. ??? ?? ??? ? ?? ?????? ?? ??? ? ??? ??? ???? ?? ?????. ??? ? ?? ??? ? ??? ?? ???? ?? ?? ???? ?????? ?? ?? ????.

??? ????? ??? ?? ? ? ??? ??? ?? ???? ??????. ?? ??, ??? ?????. ??? ??? ?????. ? ??? ?????. ?? ?? YouTube? ?? TV ??? ?? ???? ???? ????? ???? ??? ?? ???? ???? ?? ????. ?? ?? ???? ????? ?? ? ?? ??? ????.

??? ??? ??? ??? ?? ??? ??? ? ??? ?????. ??? ?? ??? ?? ?????. ??? ?? ???? ?? ??? ??? ?? ??? ????????. ?? ?? ??? ??? ?? ?? ??? ??? ? ????.

??????? ??? ???? ????. ??? ??? ?? ? ????.

"??"? ??

??? ?????. ??? ?? ??? ???? ????? ???? ??? ?? ????. ?? ????.

?? ???? ??????? 10 ?? ??. ??? Greensock?? ?? ?????. ??? ??? ?????? ?? ???? ???? ?????. ??? ??? ? ??? ??? ? ??? ????. ??? ?? Shangger? ???? ??? ???? ???, ??? ????? ??? ??? ? ????.

 gsap.fromto ( '. box', {
  xpercent : 100
}, {
  xpercent : -200,
  ? ?? : 0.5,
  ?? : 1,
  ?? : -1,
  ?? : 'None',
})

?? ???? ??? ??. ??? ?? ???? ??? ?????. ?? ?? ???? ??? ??? ???. ??? ??? ? ??? ???????? ?? ? ? ???,?? ?? ??? ?? ??? ????? ??? ??? ?? ??? ??? ??? ? ????.

 const shift = gsap.fromto ( '. box', {
  xpercent : 100
}, {
  ?? ?? : ??,
  xpercent : -200,
  ? ?? : 0.5,
  ?? : 1,
  ?? : -1,
  ?? : 'None',
})

const duration = shift.duration ()

gsap.to (shift, {
  ? ?? : ??,
  ?? : -1,
  ?? : ??,
  ?? : 'None',
})

??? ??? ? ?? "??"?????. ??? ???? ???? ?? ??? ??? ???? ????. ?? ???? ??? ??? ??? ???? ??? ??? ? ????. ?? ??, ??? ???? Power4.in?? ??? ? ????. ??? ?????? ??? ??? ? ?? ?????? ??? ??? ????. ??? ???? ?? ??? ???? ????.

?? ??? ?? ??? ?? ?? ? ????? ??? ? ????. ??? ??? ?? ?? ??? ?? ? ? ????.

??? ??? ??? ????.

 gsap.fromto (shift, {
  Totaltime : 2,
}, {
  ? ?? : ?? -1,
  ?? : -1,
  ?? : ??,
  ?? : '??'
})

??? ??? ??? ????? ? ???????. ?? ????? ??? ?? ???? ?? ???. ??? ??? ??? ??? ????.

"???"?? ??

??? ??? ?? ???? ? ?? ??? ?? ?? ??? ????.

??? ??? ??. ?? ?? ?? ???? ??. ??? ??? ???????.

???? ? ? ???? ?????. ??? ???? ?? ????. 3. ??? ??? ??? ??????.

 const getshift = () => gsap.fromto ( '. box', {
  xpercent : 100
}, {
  xpercent : -200,
  ? ?? : 0.5,
  ?? : 1,
  ?? : 'None',
})

const loop = gsap.timeline ()
  .add (getshift ())
  .add (getshift ())
  .add (getshift ())

??? ?? ??? ??? ???? ??? ???? ??? ?? ??? ? ? ??????. ??? ??? ???? ??? ?????.

???. ??? ??? ??? ????. ?? ??? ??? ???? ????? ?? ?? ??? ??? ? ????. ??? ??? ????? ????. ?, ??? ?? ??? ?? ? ?? ??? ???? ?? ?????. ??? ???? ??? ?? ???? ? ?????.

 Const Stagger = 0.5 // ???? ??? ??
const boxes = gsap.utils.toarray ( '. box')
const loop = gsap.timeline ({{
  ?? : -1
})
  .add (getshift (), 0)
  .add (getShift (), Boxes.Length * ???)
  .add (getshift (), boxes.length * stagger * 2)

?? ??? ???? ???? ?? (? ??? ????? ??? ??? ?? ??? ???? ? ? ????)…

??? "????"??? ???? ??? ???? ?? ? ? ????. ??? ??? ?? ? ??? ??? ??????? ??? ??? ????? ? ????. ???“???”??? ?? ??????.

??? ??? ?? ?? ?? ? ??? ??? ?? ? ? ????.

 const loop = gsap.timeline ({{
  ?? ?? : ??,
  ?? : -1,
})
.add (getshift (), 0)
.add (getShift (), Boxes.Length * ???)
.add (getshift (), boxes.length * stagger * 2)

gsap.fromto (??, {
  ? ?? : 4.75,
},
{
  Totaltime : '= 5',
  ?? : 10,
  ?? : 'None',
  ?? : -1,
})

???? ??? 4.75?? The Total Time? ????? ??? ???? ??? ?????. ???? ??? 5???. ??? ??? ?? ??? ?? ????. ??? GSAP? nifty =? ???? ??? ? ? ????.

?? ????? ??? ???? ?? ??????. ??? ??? ??? ?? ???? ?? ? ? ????. ??? ?? ???? ??? Windows? ???? ????. ?????? ???? ?? ??.

??? ?? ? ? ??? 12 ?? ??? ??? ?????. ???? ????? ?????. -1? ??? ?? ???? ?? ?? ?? ??????? ?? To?? ?????. ?? ?? 2? 6?? ??? ?? ????? 1?? ???? ?? 2??? 6??? ?????. ??? ??? ?? ?????? ??? ?????.

?? ???? ??? ?? ??? ???? ??????.

? ???? ? ??? ?? ??? ???? ?? ????. ?? ? ??? ???? ? ??? ?? ?? ??? ??? ?? ????.

 const ?? = 1
const cycle_duration = boxes.length * ? ??
const start_time = cycle_duration (?? ?? * 0.5)
const end_time = start_time cycle_duration

? ?? ?? ?? ??? ???? ?? ??? ??? ??? ??? ??? ?? ??? ??? ? ? ?? ? ? ????. ??? ? ?? ?? ?? ???? ????? ?? ??? ???? ??? ???? ?? ????? ???? ? ????? ?? ?????.

???? ??? ? ?? ??? ??? ?? ??? ?????.

 Const Stagger = 0.5
const boxes = gsap.utils.toarray ( '. box')

const loop = gsap.timeline ({{
  ?? ?? : ??,
  ?? : -1,
})

const shifts = [... ??, ... ??, ... ??]

shifts.foreach ((box, index) => {
  loop.fromto (box, {
    xpercent : 100
  }, {
    xpercent : -200,
    ?? : 1,
    ?? : 'None',
  }, index * stagger)
})

??? ???? ? ?? ???? ??? ?? ?????. ??? ??? ??? ?? ??? ??? ????. ?? ??? 3 ?? ?? ??? ???? ? ??? ?? ? ?????? ?????.

??? ? ??? ???? ??? ?? ? ????? ??? ? ??? ?? ????.

??? ?? ? ??? ??? ??? ??? ??????. ??? ??? ?? ???????. ?? ??? ?? ?? ? ??? ????? ???????.

 const ?? = 1
const cycle_duration = stagger * boxes.length
const start_time = cycle_duration (?? ?? * 0.5)
const end_time = start_time cycle_duration

gsap.fromto (??, {
  Totaltime : start_time,
},
{
  Totaltime : end_time,
  ?? : 10,
  ?? : 'None',
  ?? : -1,
})

???!

?? ??? ????? "???"? ?? ? ?? ????.

 Const Stagger = 0.5
const ??? = 5 * ? ??
const start_time = (cycle_duration (Stagger * 0.5)) ???

?? ??? ?? ?? ???? ?????.

??? ??? ??? ???? ?? ?? ??? ??? ???? ??? ?? ????. ? ??? ???? ??? "???"?? ?? ???????. ?? ??? ??? ???? ???? ??? ?? ??????.

??? ??? ??? document.body? ???????. ?? ??? ???? ?? ? ??? ???? ?? ?? ???? ???????. ??? Yoyo? ???? ?? ? ? ????. 1? ?? ? ??? ?????.

 shifts.foreach ((box, index) => {
  const box_tl = gsap
    .Timeline ()
    .fromto (
      ??,
      {
        xpercent : 100,
      },
      {
        xpercent : -200,
        ?? : 1,
        ?? : 'None',
      }, 0
    ))
    .fromto (
      ??,
      {
        ??? : 0,
      },
      {
        ??? : 1,
        ?? : 1,
        ?? : ??,
        ?? : 'None',
        ?? : 0.5,
      },
      0
    ))
  loop.add (box_tl, index * stagger)
})

?? ?? ?? 1? ???? ??? ?????? ??? ?? ??? ? ????. ??? ?? ???? ? ??? 0.5?? ?? ?? ????. ??? ??? ????? ??? ???? ??? ??? ?? ??? ??? ????. ???, ??? ??? ??? ??? ???? ??? ??? ????. ?? ??, ??? ?? ???? ?? ??? ?? ?? ? ????.

?? ??? ???? ??? ?????.

??. ??? ?? ??? ???? ??? ?????. ? ??? ????? ???? ??? ???????. CSS??? ????? ? ?? : ??? ?? ?????. ??? GSAP? ??? ??? ???? ????? ?? ???? ?? ??? ????.

 shifts.foreach ((box, index) => {
  const box_tl = gsap
    .Timeline ()
    .fromto (
      ??,
      {
        xpercent : 100,
      },
      {
        xpercent : -200,
        ?? : 1,
        ?? : 'None',
        ???? ?? : ??,
      }, 0
    ))
    .fromto (
      ??,
      {
        ??? : 0,
      },
      {
        ??? : 1,
        ?? : 1,
        Zindex : Box.Length 1,
        ?? : ??,
        ?? : 'None',
        ?? : 0.5,
        ???? ?? : ??,
      },
      0
    ))
  loop.add (box_tl, index * stagger)
})

? ?? ??? ??? ?? ??? ??????! z-index : boxes.length? ??? ??? ??????. ??? Z- ??? ????? ??? ???????.

??? ??? ??? ??? ????! ??? ? ??? ??? ??. ?? ????? ??? ??. ??? ??? ?? ????! ??? ???? ???? ?? ??????! ?

? ?? ? ?? ????? ??? ???, ? ?? ? ???? ?? ? ? ????. ???? ??? 0.2? ?? ??? ??? ????? ??????.

??? ?? ??? ???? ??? ????? ???? ?? ???? ??? ? ??? ????. 0.25 ? ???? ?????. 0.5 ? ?????. 0.25 ? ???? ?????.

 .fromto (
  ??, {
    ???? : 0,
  }, {
    ???? : 1,
    ?? : 0.25,
    ?? : 1,
    RetureDelay : 0.5,
    ???? ?? : ??,
    ?? : 'None',
    ?? : ??,
  }, 0)

???! ??? ??? ??? ?? ?? ???? ?? ? ??????. ??? ?? ??? ?? ???? ?? ????? ??? ?? ??? ????.

??? ???? ?????

?? ??? ??? ??? ?? ??? ???? ?????. ?? ?? GSAP? ScrollTrigger? ??? ? ????. ?? ?? ????? ??? ??? ?????. ??? ??? ??? ?? ???? ????? ??????.

 const loop_head = gsap.fromto (loop, {
  Totaltime : start_time,
},
{
  Totaltime : end_time,
  ?? : 10,
  ?? : 'None',
  ?? : -1,
  ?? ?? : ??,
})

const scrub = gsap.to (loop_head, {
  Totaltime : 0,
  ?? ?? : ??,
  ?? : 1,
  ?? : 'None',
})

??? ??? ScrollTrigger? ???? ? ???? ? ??? ?????? ??? ??? ??? ???? ????. ? ???? ??? ??? ??? ??? ????. ??? ??? ??? ???? ????? ?? ? ????. ??? ??? ? ?? ??? .boxes ??? ???? ???? ???? ????. (??? ?????? ??? ???????.) ??? ?? ?? ???? ?????. ??? ???? .box? ???? ???? ??? ??? ??? ??????.

 'https://cdn.skypack.dev/gsap/scrolltrigger'?? scrolltrigger ?? ??
gsap.registerplugin (scrolltrigger)

scrolltrigger.create ({
  ?? : 0,
  ? : '= 2000',
  ?? : ??,
  PIN : '.boxes',
  onupdate : self => {
    scrub.vars.totaltime = loop_head.duration () * self.progress
    scrub.invalidate (). ?? ?? ()
  }
})

??? ??? Onupdate ?????. ???? ??? ?? ??? ???? ??? ? ??? ??????. ??? ??? ???? ????? ?? ? ??? ??????. ?? ???? ?? ? ? ? ??? ??? ?????.

???????! ?? ???? ??? ???? ??? ???? ? ? ????.

??? ????? ?? ??? ?? ?? ??? ???? ?? ??? ????? ??? ? ? ????. ??? ???? ??? ??? ?? ?? ??????.

?? ?????? ?? ??

???? ??? ??? ??????. ?? ??? ?? ??????!

?? ?? ?? GSAP ????? ??? ??? ? ?? LOOP_HEAD? ? ??? ???? ?? ????. ?? ???? ?? ???? ? ????. ??? "??"GSAP? ? ?? ?? ????.

??? ?? ??? ???? ??? ???? ???????.

 const playhead = {?? : 0}

?? ???? ?????? ??? ???? ? ? ????. ???, ??? GSAP? ? ????? ??? ? ???, ?? LOOP_HEAD ?? ??? ?? ?? ????. ?? ??, ?? ??? 10?? ? 11? ???? ?? 1????.

 const position_wrap = gsap.utils.wrap (0, loop_head.duration ())

const scrub = gsap.to (playhead, {
  ?? : 0,
  onupdate : () => {
    loop_head.totaltime (position_wrap (playhead.position))
  },
  ?? ?? : ??,
  ?? : 1,
  ?? : 'None',
})

?????, ???? ??? ??? ???? ? ? ??? ??? ???? ???????. ??? TotalTime ?? ?????.

 scrolltrigger.create ({
  ?? : 0,
  ? : '= 2000',
  ?? : ??,
  PIN : '.boxes',
  onupdate : self => {
    scrub.vars.position = loop_head.duration () * self.progress
    scrub.invalidate (). ?? ?? ()
  }
})

? ???? ??? ???? ????? ?? ??? ? ? ????.

??? ? ? ?? ??? ????. ??? ? ?? ??? ??? ?? ??? ?? ? ? ???? ????? ????. ??? ??? ??? ? ????. ?? ???????. ??? ????? ?? ????, ??? ??? ??? ?? ????? ??? ????. ??? TotalTime? ?? ????. ??????? ?? ? ?? ??? ???? Totalduration? ?? ??? ??? ??? ???? ??? ?????.

?? ??, ?? ??? ?? ??? 5?? ??? ??? ????. ??? 0?? ?? ???? ?? ???. ??, ??? ?? ??? 10?? ?? ?????. ?? ???? 15? ?????. ??, ??? ?? ??? ?? ? ????. ?? ?? ?? ?? ?? ? ?? ??? ???? ? ? ????.

?? ???? ???????.

 ?? = 0???

?? ScrollTrigger ??? ?????????.

 const trigger = scrolltrigger.create ({
  ?? : 0,
  ? : '= 2000',
  ?? : ??,
  PIN : '.boxes',
  onupdate : self => {
    const scroll = self.scroll ()
    if (scroll> self.end -1) {
      // ? ??? ??? ?????
      ? (1, 1)
    } else if (scroll <p>?? ??? ?? ??? ???? ??? ??????. ??? ????? ?? ??? ?? ??????. ??? ?? ??? ????? ??? ?? ? ? ???? ??? ??? ??? ???? ?????. ? ??? ??? ?? ?? ???? ? ??? ??? ?????.</p><pre rel="JavaScript" data-line=""> const wrap = (IterationDelta, scrollto) => {
  ?? = ?? ??
  trigger.scroll (scrollto)
  trigger.update ()
}

??? ?? ???? ??? ????! ??? ???? ? ??? ??? ?? ?? ?? ??? ? ??? ???, ????! ?? ???!

??? ?? ?? ? ?? ??? ???? ?????.

??? ??

??? ??? ????. ??? ?? ?? ??? ?? ? ? ?? "??"?? ????. ??? ???? ???????. GSAP? ?? ????? gsap.utils.snap? ??? ? ???? ?? ??? ? ????. ??? ??? ???? ?? ? ??? ???? ?? ?????. ??? 0? 1 ??? ??? ???? ??? 10 ?? ??? ????. ??? 0.1? ??? ???? ??? ??? ?? ?????.

 const snap = gsap.utils.snap (1 / boxes.length)

??? ??? ??? ?? ?? ???? ? ??? ??? ??? ?????.

???? ???? ???? ????. ?? ?? ScrollTrigger?? ??? ???? ??? ? ????. ???? ??? ?? ??? ??? ? ????.

 scrolltrigger.addeventListener ( 'scrollend', () => {
  scrolltoposition (scrub.vars.position)
})

??? ??? scrolltoposition? ????.

 const scrolltoposition = position => {
  const snap_pos = snap (??)
  const progress =
    (snap_pos- loop_head.duration () * ??) / loop_head.duration ()
  const scroll = progresstoscroll (Progress)
  trigger.scroll (???)
}

??? ??? ????? ?????

1. ?? ? ??? ?????
2. ?? ?? ??? ?????. LOOP_HEAD.DURATION ()? 1?? 2.5? ????? ?? ? ???. ??? ???? 0.5? ??? ???? 2? ??? ????, ??? 2.5-1 * 2 / 1 === 0.5. ??? ?? 1? 0 ??? ??? ?? ??? ?????.
3. ??? ?? ??. ??? ?? ?????? ?? ??? ??? ?????. ? ???? 2000 ? ??? ????? ? ? ??? ????. ??? ??? ???? ?? ??? ?? progresstoscroll? ????.

 const progresstoscroll = progress =>
  gsap.utils.clamp (1, trigger.end -1, gsap.utils.wrap (0, 1, progress) * trigger.end)

? ??? ?? ?? ?? ?? ?? ? ???? ??? ?????. ??? ??? ???? ???? ?? 0 ?? 2000? ? ? ??? ?????. ??? ?????. ??? ?? ??? ??? ?? ? ???? ??? ?? ?? ??? ???? ????.

??? ??? ?? ????. ? ??? ???? ? ?? ????? ??? ??????.

? ??? ?? ? ?????? ???? ?? ??? ??? ???????. ? ?? ?? ??? ??? ???? ???? ??? ?????.

 const scrub = gsap.to (playhead, {
  ?? : 0,
  onupdate : () => {
    loop_head.totaltime (position_wrap (playhead.position))
  },
  ?? ?? : ??,
  ?? : 0.25,
  ?? : 'Power3',
})

??? ?? ??? ???? ??? ??? ? ? ????. ??? ??? ?? ??? ??? ??? ??? ?????. ??? ??? ?? ? ? ???????? ??? ???? ???????.

 const scrolltoposition = position => {
  const snap_pos = snap (??)
  const progress =
    (snap_pos- loop_head.duration () * ??) / loop_head.duration ()
  const scroll = progresstoscroll (Progress)
  if (progress> = 1 || ?? <p> ??? ?? ??? ??? ?? ?? ???? ??? ????!</p><h3> ????</h3><p> ??? ??? ?? ????? ??? ??????. ????? ??? ??? ?? ??? ???? ???? ??? ? ????. ?? ??, ??? "??"? "??"?? ? ??? ???? ???? ?? ? ? ????. ????? ? ?? ??? ???? ????.</p><pre rel="JavaScript" data-line=""> const next = () => scrolltoposition (scrub.vars.position- (1 / boxes.length)))
const prev = () => scrolltoposition (scrub.vars.position (1 / boxes.length)))

// ?? ? ??? ??? Plus A ? D.
document.addeventListener ( 'keydown', event => {
  if (event.keyCode === 37 || event.KeyCode === 65) ?? ()
  if (event.keyCode === 39 || event.KeyCode === 68) prev ()
})

document.querySelector ( '. Next'). addEventListener ( 'Click', Next)
document.querySelector ( '. prev'). addEventListener ( 'Click', prev)

??? ???? ?? ?? ?? ? ? ????.

??? ??? ?? ??? ???? ????? ?? ???? ? ????.

?? ??!

??? GSAP? ?? ??? ????? ? ? ????! ??? ??? ?? ??? ?? ????? ??? ?? ??? ??? ??????. ?? ????? ??? ??? ???? ?????.

??? ?? ??? ?????.

• ??? ?????? ????? ? ? ????. ?
• ??? ?? ? ? ???? ???? ??? ??? ? ????.
• Scrolltrigger? ???? ???? ?? ?????? ???? ??.
• GSAP? ?? ????? ???? ??? ???? ??.

?? ??? ?? ? ? ????! ?

"??"GSAP? ?? ??? ??? ???? ?????. ? ??? ????? ? ? ????? ???? ???? "Cover Flow"??? ???? ??? ??? ????!

? ??? '?? GSAP'? ?? : '???'?? ?????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!