Få linjen til at vokse fra venstre mod højre, mens du scroller fra toppen til bunden af scrollporten (previewets scrollområde). Knyt animationen til scrollpositionen vha. animation-timeline og scroll().

Få boksen til at rotere 180 grader, fra den kommer ind i scrollporten forneden, til den forlader den foroven. Brug animation-timeline med view().

Bemærk, at view() følger det enkelte elements passage gennem scrollporten, mens scroll() følger hele scrollstrækningen.

Få boksen til at færdiggøre sin rotation, når den er kommet helt ind i scrollporten, vha. animation-range: entry.

Prøv derefter exit, contain og cover, og bemærk, hvornår rotationen begynder og slutter. Prøv også entry 25% entry 75% for at afgrænse rotationen til en del af indgangen.

Afslør billedet fra venstre mod højre, mens det toner ind i scrollporten. Udfyld @keyframes clip-reveal med clip-path og opacity, og knyt animationen til view() på img.

Lad animationen køre fra 20% til 50% af timelinen med ease-out, og behold sluttilstanden med both. Prøv derefter at ændre beskæringen, så billedet afsløres oppefra.

Få boksene til at tone ind fra hver sin side, når de kommer ind i scrollporten. Lad .box-1 starte 2rem mod venstre med en rotation på -5deg, og .box-2 starte 2rem mod højre med en rotation på 5deg.

Udfyld @keyframes appear-1 og appear-2, og brug dem på hver sin boks. Knyt begge animationer til view(), afgræns dem til 0% 50%, og brug ease-out og both, så boksene ender fuldt synlige uden forskydning eller rotation.

Få boksen til at rotere 360 grader, mens sticky-elementet bliver holdt fast. Brug containerens navngivne timeline --container som animation-timeline på .box.

animation-range: contain er allerede angivet. Slå Debug til for at se containerens og sticky-elementets grænser.

Få billedet til at bevæge sig 75vh nedad og tone helt ud, mens du scroller de første 100vh. Udfyld @keyframes move med translate og opacity, og knyt animationen til scroll() vha. animation-timeline på img.

Lad animationen køre lineært, afgræns forløbet med animation-range, og sørg for, at billedet forbliver skjult bagefter. Prøv derefter at afslutte animationen ved 50vh, og bemærk, hvordan tempoet ændres. I previewet svarer 100vh til scrollportens højde.

Få hver boks til at vokse på vej ind og krympe på vej ud, når du scroller vandret. Brug animation-timeline med view() på inline-aksen. Keyframes med entry og exit er allerede angivet.

Prøv derefter at ændre entry 50% til entry 100%, og bemærk, hvordan indgangen ændrer sig.

Få scroll i venstre panel til at rotere boksen i højre panel 180 grader. Brug timeline-scope på den fælles forælder .scrollport, så begge paneler kan bruge timelinen --scroll.

Timelinen er allerede defineret på .scroller og angivet som animation-timeline på .box, som ligger uden for .scroller.

Få de tre kort til at tone ind og bevæge sig op forskudt fra venstre mod højre, mens containeren kommer ind og bevæger sig videre gennem scrollporten. Knyt alle kortene til containerens fælles timeline --cards.

Brug forskellige animation-range på kortene: Lad det første animere fra entry 0% til entry 100%, det andet fra entry 50% til contain 25% og det tredje fra entry 100% til contain 50%. Det tredje kort begynder dermed først, når containeren er helt inde i scrollporten. Keyframes med en bevægelse på 4rem er allerede angivet.

Prøv derefter at bytte om på kortenes ranges, så det højre kort kommer ind først. Bemærk, at forskydningen følger scrollpositionen, også når du scroller tilbage.

Få boksen til at vokse, dreje på plads og tone ind på vej ind i scrollporten. Lad den stå stille og være fuldt synlig, mens den er helt inde. På vej ud skal den krympe, dreje videre og tone ud.

Knyt animationen til view(), og udfyld keyframes med opacity, scale og rotate. Ved entry 0% skal boksen være usynlig, skaleret til 0.6 og roteret -20deg. Ved entry 100% og exit 0% skal den være fuldt synlig med scale: 1 og rotate: 0deg. Ved exit 100% skal den være usynlig, skaleret til 0.6 og roteret 20deg.

Ranges er angivet direkte i keyframes, så du behøver ikke tilføje animation-range. Prøv derefter at ændre entry 100% til entry 50%, så boksen er færdig med sin indgang tidligere.