{"id":3399,"date":"2021-05-23T12:18:41","date_gmt":"2021-05-23T12:18:41","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3399"},"modified":"2023-02-28T04:23:33","modified_gmt":"2023-02-28T04:23:33","slug":"js-tutorial-change-background-colour-with-gsap-scrolltrigger","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-change-background-colour-with-gsap-scrolltrigger\/","title":{"rendered":"JS Tutorial &#8211; Change Background Colour with GSAP ScrollTrigger"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Collection of hand-picked free\u00a0<strong>vanilla JavaScript background effect<\/strong>\u00a0code examples:\u00a0<em>change background color or image, animated, with canvas<\/em>\u00a0and etc.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"JS Tutorial - Change Background Colour with GSAP ScrollTrigger\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/qBYBvWB?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/qBYBvWB\"><br \/>\nJS Tutorial &#8211; Change Background Colour with GSAP ScrollTrigger<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">gsap.registerPlugin(ScrollTrigger);\r\n\r\n\/* SMOOTH SCROLL *\/\r\nconst scroller = new LocomotiveScroll({\r\n  el: document.querySelector(\".container\"),\r\n  smooth: true\r\n});\r\n\r\nscroller.on(\"scroll\", ScrollTrigger.update);\r\n\r\nScrollTrigger.scrollerProxy(\".container\", {\r\n  scrollTop(value) {\r\n    return arguments.length\r\n      ? scroller.scrollTo(value, 0, 0)\r\n      : scroller.scroll.instance.scroll.y;\r\n  },\r\n  getBoundingClientRect() {\r\n    return {\r\n      left: 0,\r\n      top: 0,\r\n      width: window.innerWidth,\r\n      height: window.innerHeight\r\n    };\r\n  }\r\n});\r\n\r\nScrollTrigger.addEventListener(\"refresh\", () =&gt; scroller.update());\r\n\r\nScrollTrigger.refresh();\r\n\r\n\/* COLOR CHANGER *\/\r\nwindow.addEventListener(\"load\", function () {\r\n  const scrollColorElems = document.querySelectorAll(\"[data-bgcolor]\");\r\n  scrollColorElems.forEach((colorSection, i) =&gt; {\r\n    const prevBg = i === 0 ? \"\" : scrollColorElems[i - 1].dataset.bgcolor;\r\n    const prevText = i === 0 ? \"\" : scrollColorElems[i - 1].dataset.textcolor;\r\n\r\n    ScrollTrigger.create({\r\n      trigger: colorSection,\r\n      scroller: \".container\",\r\n      start: \"top 50%\",\r\n      onEnter: () =&gt;\r\n        gsap.to(\"body\", {\r\n          backgroundColor: colorSection.dataset.bgcolor,\r\n          color: colorSection.dataset.textcolor,\r\n          overwrite: \"auto\"\r\n        }),\r\n      onLeaveBack: () =&gt;\r\n        gsap.to(\"body\", {\r\n          backgroundColor: prevBg,\r\n          color: prevText,\r\n          overwrite: \"auto\"\r\n        })\r\n    });\r\n  });\r\n});\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Collection of hand-picked free\u00a0vanilla JavaScript background effect\u00a0code examples:\u00a0change background <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-change-background-colour-with-gsap-scrolltrigger\/\" title=\"JS Tutorial &#8211; Change Background Colour with GSAP ScrollTrigger\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3813,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[325,329,264,263,103,227],"newstopic":[],"class_list":{"0":"post-3399","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-background-effects","9":"tag-gsap-scrolltrigger","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3399"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3399\/revisions"}],"predecessor-version":[{"id":3401,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3399\/revisions\/3401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3813"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3399"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}