CodePen Embed - Locomotive Scroll with ScrollTrigger scrubbing and pinning

Live

Live

Live

This Pen is owned by GreenSock on CodePen. It is a fork of this Pen.

See more by @GreenSock on CodePen

External CSS

External JavaScript

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":false,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"zYrELYe\",\"auto_save\":false},\"hashid\":\"zYrELYe\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://unpkg.co/gsap@3/dist/gsap.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.css\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js\",\"order\":2,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"scrolltrigger\",\"gsap\",\"scrolling\",\"trigger\",\"locomotive\"],\"id\":45628071,\"user_id\":16327,\"html\":\"<div class=\\\"smooth-scroll\\\">\\n  <section class=\\\"description panel blue\\\">\\n    <div><h1>Locomotive Scroll + ScrollTrigger</h1>\\n      <p>Demonstrates how ScrollTrigger can be used with a smooth scrolling library like Locomotive Scroll, including scrubbing and pinning.</p>\\n      <div class=\\\"scroll-down\\\">Scroll down<div class=\\\"arrow\\\"></div></div>\\n    </div>\\n  </section>\\n\\n\\n  <section class=\\\"panel red\\\">\\n    <p><span class=\\\"line line-1\\\"></span>This line's animation will begin when it enters the viewport and finish when its top edge hits the top of the viewport, staying perfectly in sync with the scrollbar because it has <code>scrub:&nbsp;true</code></p>\\n  </section>\\n\\n\\n  <section class=\\\"panel orange\\\">\\n    <p><span class=\\\"line line-2\\\"></span>This orange panel gets pinned when its top edge hits the top of the viewport, then the line's animation is linked with the scroll position until it has traveled 100% of the viewport's height (<code>end: \\\"+=100%\\\"</code>), then the orange panel is unpinned and normal scrolling resumes. Padding is added automatically to push the rest of the content down so that it catches up with the scroll when it unpins. You can set <code>pinSpacing: false</code> to prevent that if you prefer.</p>\\n  </section>\\n\\n\\n  <section class=\\\"panel purple\\\">\\n    <p><span class=\\\"line line-3\\\"></span>This panel gets pinned in a similar way, and has a more involved animation that's wrapped in a timeline, fading the background color and animating the transforms of the paragraph in addition to the line, all synced with the scroll position perfectly.</p>\\n  </section>\\n\\n\\n  <section class=\\\"panel gray\\\">\\n    DONE!\\n  </section>\\n  \\n  \\n</div>\\n\",\"css\":\".panel {\\n  height: 100vh;\\n}\\n.line {\\n  width: 100%;\\n  max-width: 800px;\\n  height: 8px;\\n  margin: 0 0 10px 0;\\n  position: relative;\\n  display: inline-block;\\n  background-color: rgba(255,255,255,1);\\n}\\n\\n/* by default, ScrollTrigger sets overflow to auto so that the scrollbar is factored in particularly when pinning so that the pinned elements' sizes are correct, but with LocomotiveScroll we want to force that to be hidden because it does its own [fake] scrollbar */\\n.smooth-scroll {\\n  overflow-y: hidden !important;\\n}\\n\",\"js\":\"gsap.registerPlugin(ScrollTrigger);\\n\\n\\n// --- SETUP START ---\\n// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll\\nconst locoScroll = new LocomotiveScroll({\\n  el: document.querySelector(\\\".smooth-scroll\\\"),\\n  smooth: true\\n});\\n// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)\\nlocoScroll.on(\\\"scroll\\\", ScrollTrigger.update);\\n\\n// tell ScrollTrigger to use these proxy methods for the \\\".smooth-scroll\\\" element since Locomotive Scroll is hijacking things\\nScrollTrigger.scrollerProxy(\\\".smooth-scroll\\\", {\\n  scrollTop(value) {\\n    return arguments.length ? locoScroll.scrollTo(value, {duration: 0, disableLerp: true}) : locoScroll.scroll.instance.scroll.y;\\n  }, // we don't have to define a scrollLeft because we're only scrolling vertically.\\n  getBoundingClientRect() {\\n    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};\\n  },\\n  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).\\n  pinType: document.querySelector(\\\".smooth-scroll\\\").style.transform ? \\\"transform\\\" : \\\"fixed\\\"\\n});\\n\\n// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. \\nScrollTrigger.addEventListener(\\\"refresh\\\", () => locoScroll.update());\\nScrollTrigger.defaults({ scroller: \\\".smooth-scroll\\\" });\\n// --- SETUP END ---\\n\\n\\n\\n// --- RED PANEL ---\\ngsap.from(\\\".line-1\\\", {\\n  scrollTrigger: {\\n    trigger: \\\".line-1\\\",\\n    scrub: true,\\n    start: \\\"top bottom\\\",\\n    end: \\\"top top\\\",\\n    onUpdate() {\\n      console.log(\\\"Update\\\")\\n    }\\n  },\\n  scaleX: 0,\\n  transformOrigin: \\\"left center\\\", \\n  ease: \\\"none\\\"\\n});\\n\\n\\n// --- ORANGE PANEL ---\\ngsap.from(\\\".line-2\\\", {\\n  scrollTrigger: {\\n    trigger: \\\".orange\\\",\\n    scrub: true,\\n    pin: true,\\n    start: \\\"top top\\\",\\n    end: \\\"+=100%\\\",\\n    onUpdate() {\\n      console.log(\\\"Update\\\")\\n    }\\n  },\\n  scaleX: 0, \\n  transformOrigin: \\\"left center\\\", \\n  ease: \\\"none\\\"\\n});\\n\\n\\n// --- PURPLE/GREEN PANEL ---\\nvar tl = gsap.timeline({\\n    scrollTrigger: {\\n      trigger: \\\".purple\\\",\\n      scrub: true,\\n      pin: true,\\n      start: \\\"top top\\\",\\n      end: \\\"+=100%\\\",\\n      onUpdate() {\\n        console.log(\\\"Update\\\")\\n      }\\n    }\\n  });\\n\\ntl.from(\\\".purple p\\\", {scale: 0.3, rotation:45, autoAlpha: 0, ease: \\\"power2\\\"})\\n  .from(\\\".line-3\\\", {scaleX: 0, transformOrigin: \\\"left center\\\", ease: \\\"none\\\"}, 0)\\n  .to(\\\".purple\\\", {backgroundColor: \\\"#28a92b\\\"}, 0);\\n\\n\\n\\n\\n\\n// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.\\nScrollTrigger.refresh();\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":\"jquery\",\"created_at\":\"2020-06-29T19:39:16.000Z\",\"updated_at\":\"2022-11-28T14:40:43.078Z\",\"title\":\" Locomotive Scroll with ScrollTrigger scrubbing and pinning\",\"description\":\"Shows how to use Locomotive Scroll with ScrollTrigger\",\"slug_hash\":\"zYrELYe\",\"head\":\"<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>\\n<meta name=\\\"viewport\\\" content=\\\"user-scalable=no, width=device-width\\\" />\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":2278179,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"cpid\":null,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3OTg4NzYxOH0._ZBZYj4ETm_VDyRBLfVdzkFONo22nmESt-qwfepJ8F0","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}