--- title: How to Use the Locomotive Scroll for all Kinds of... description: Locomotive Scroll lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. It works primarily... canonical: https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Use the Locomotive Scroll for all Kinds of Scrolling Effects | daily.dev og:description: Locomotive Scroll lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. It works primarily... og:url: https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp og:image: https://api.daily.dev/og/posts/e1SCuzMxp.png og:image:alt: How to Use the Locomotive Scroll for all Kinds of Scrolling Effects og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Use the Locomotive Scroll for all Kinds of Scrolling Effects **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 3 min read · 31 upvotes · 2 comments ## Summary Locomotive Scroll lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. It works primarily through specific attributes in the HTML. Elements with these attributes trigger event listeners in JavaScript when they are in the viewport, then apply CSS transform values as inline styles. It’s pretty plug-and-play like that. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@kmhmubin** · 1 upvotes > insightful --- Tags: [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Use the Locomotive Scroll for all Kinds of Scrolling Effects","url":"https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp"},"datePublished":"2020-12-16T16:12:17.199Z","dateModified":"2021-10-07T14:17:10.317Z","description":"Locomotive Scroll lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. It works primarily...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ad82f0f0690ba348fab19e3df04ef696","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ad82f0f0690ba348fab19e3df04ef696","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":31},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"webdev","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"How to Use the Locomotive Scroll for all Kinds of Scrolling Effects"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects-e1scuzmxp","comment":[{"@type":"Comment","text":"insightful","datePublished":"2020-12-16T17:15:37.089Z","url":"https://daily.dev/posts/e1SCuzMxp#c-MoIWI3fYC","author":{"@type":"Person","name":"K M H Mubin","url":"https://daily.dev/kmhmubin","image":"https://media.daily.dev/image/upload/f_auto/v1603259645/avatars/TcxjjxGKV"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```