Skip to content

Instantly share code, notes, and snippets.

@tamtam96

tamtam96/index.html

Created October 12, 2022 08:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tamtam96/e8ccbf35de57f72ed5e87c08d4866255 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tamtam96/e8ccbf35de57f72ed5e87c08d4866255 to your computer and use it in GitHub Desktop.
Download ZIP
✅ Scroll-Linked Animations: Horizontal scroll section (view-timeline 2022 version)
Raw
index.html
<div class="container">
<section data-bgcolor="#bcb8ad" data-textcolor="#032f35">
<div>
<h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1>
<p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">With CSS view-timeline</p>
</div>
</section>
<section id="sectionPin">
<div class="pin-wrap">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
<img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
<img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
<img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
</div>
</section>
<section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<h2 data-scroll data-scroll-speed="1" class="credit">
Created by <a href="https://twitter.com/bramus" target="_top" rel="noreferrer noopener">Bramus</a>.<br /><br />Design and content by <a href="https://codepen.io/cameronknight/pen/qBNvrRQ" target="_top">Cameron Knight</a>.</h2>
</section>
</div>
<div class="warning warning--animation-timeline">
<p>⚠️ Your browser does not support Scroll-Linked Animations with CSS <code>view-timeline</code>. <!-- Please try Chrome 108+ with the “Experimental Web Platform Features” flag enabled. --></p>
<p>To make this demo work in your browser, <a href="https://github.com/flackr/scroll-timeline">a polyfill</a> has been loaded.</p>
</div>
<div class="warning warning--alarm warning--view-timeline">
<p>🚨 Your browser does not support Scroll-Linked Animations with CSS <code>view-timeline</code>.</p>
<p>Unfortunately the <a href="https://github.com/flackr/scroll-timeline">loaded polyfill</a> stops loading when it detects support for <code>scroll-timeline</code>, which your browser supports.</p>
<p>Therefore, this demo will not work at all for you.</p>
</div>
Raw
script.js
// Alternative Versions:
// - CSS view-timeline 2022 + Polyfill: https://codepen.io/bramus/pen/dyeVmvg 👈 = The version you are currently looking at
// - JS ScrollTimeline 2022 Syntax + Polyfill: https://codepen.io/bramus/pen/WNzZmdP
// - JS Motion One: https://codepen.io/bramus/pen/MWVvrEE
// - CSS @scroll-timeline: https://codepen.io/bramus/pen/QWGbOBQ
// - JS ScrollTimeline 2021 Syntax: https://codepen.io/bramus/pen/jOVWpyr
// import "https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"
import "https://rawcdn.githack.com/bramus/scroll-timeline/ccbbc40bfbdc1668691359a0ceaacd8e487f62ad/dist/scroll-timeline.js";
Raw
scroll-linked-animations-horizontal-scroll-section-view-timeline-2022-version.markdown
Raw
style.css
@keyframes move {
to {
/* Move horizontally so that right edge is aligned against the viewport */
transform: translateX(calc(-100% + 100vw));
}
}
#sectionPin {
/* Stretch it out, so that we create room for the horizontal scroll animation */
height: 500vh;
overflow: visible; /* To make position sticky work … */
view-timeline-name: section-pin-tl;
view-timeline-axis: block;
}
.pin-wrap {
/* Stick to Top */
height: 100vh;
position: sticky;
top: 0;
/* Hook animation */
will-change: transform;
animation: linear move forwards;
/* Link animation to view-timeline */
animation-timeline: section-pin-tl;
animation-range: contain 0% 100%;
/* Below is a duplication of animation-range using animation-time-range.
This is because the polyfill looks for that property (which now got renamed) */
animation-time-range: contain 0% 100%;
}
/* Show warning for older browser */
.warning {
position: fixed;
top: 1em;
right: 1em;
left: 1em;
padding: 1em;
border: 1px solid black;
z-index: 9999;
text-align: center;
color: black;
background: rgba(255 255 225 / 0.9);
font-size: .7em;
}
.warning a {
color: blue;
}
.warning > :first-child {
margin-top: 0;
}
.warning > :last-child {
margin-bottom: 0;
}
.warning a {
color: blue;
}
.warning--info {
border: 1px solid #123456;
background: rgb(205 230 255 / 0.8);
}
.warning--alarm {
border: 1px solid red;
background: #fff1f1;
}
/* Only show polyfill warning when loaded */
@supports (animation-timeline: scroll()) {
.warning--animation-timeline {
display: none;
}
}
@supports not (animation-timeline: scroll()) {
.warning--view-timeline {
display: none;
}
}
/* Don’t show view-timeline warning when supported */
@supports (view-timeline: works) {
.warning--view-timeline {
display: none;
}
}
/** Below is the orig CSS from the original demo. These are wrapped in layer to make the unlayered styles above win from them */
@layer orig {
:root {
--text-color: #111;
--bg-color: #b9b3a9;
}
html {
max-width: 100vw;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: termina, sans-serif;
color: var(--text-color);
background: var(--bg-color);
transition: 0.3s ease-out;
overflow-x: hidden;
max-width: 100vw;
width: 100%;
overscroll-behavior: none;
}
section {
min-height: 100vh;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
position: relative;
}
section:not(#sectionPin) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 2rem;
padding: 50px 10vw;
margin: auto;
place-items: center;
}
img {
height: 80vh;
width: auto;
object-fit: cover;
}
h1 {
font-size: clamp(1.5rem, 16vw + 0.5rem, 5rem);
line-height: 1;
font-weight: 800;
margin-bottom: 1rem;
position: absolute;
top: 10vw;
left: 10vw;
z-index: 4;
overflow-wrap: break-word;
hyphens: auto;
@media (max-width: 768px) {
font-size: clamp(1.5rem, 5vw + 0.5rem, 5rem);
}
span {
display: block;
}
}
h2 {
font-size: 2rem;
max-width: 400px;
}
.credit {
font-family: Termina, sans-serif;
a {
color: var(--text-color);
}
}
* {
box-sizing: border-box;
}
#sectionPin {
height: 100vh;
overflow: hidden;
display: flex;
left: 0;
background: var(--text-color);
color: var(--bg-color);
}
.pin-wrap {
height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 50px 10vw;
& > * {
min-width: 60vw;
padding: 0 5vw;
}
}
*:not(.warning) > p {
position: absolute;
bottom: 10vw;
right: 10vw;
width: 200px;
line-height: 1.5;
}
}
Raw
styles
<link href="https://use.typekit.net/skn8ash.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment