3e:null 3f:["$","title",null,{"children":"GSAP ScrollTrigger in Observable | ClaraPT's Workspace | Observable"}] 45:T454,md ` In short, there are basically **two ways** to add scroll-triggered animation with ScrollTrigger. 1. ***add ScrollTrigger to a GSAP tween.*** Like what I did above: use the GSAP tween to describe the animation, and add \`scrollTrigger: {}\` prop to describe where the animation actually takes place \`\`\`js gsap.to(".box", { scrollTrigger: { trigger: "selector", ...... }, x: 500 }); \`\`\` 2. ***\`ScrollTrigger.create()\`*** What you would add to \`ScrollTrigger.create()\` is basically the same as what you would add to \`gsap.to(scrollTrigger: {})\`. The biggest difference is that ***it can exist with or without the GSAP tweens***. You can customize what happens at different scrolling phases such as \`onEnter\` and \`onLeave\`, and what happens does not even need to be animation. I find it useful by passing the good ol' \`d3.transition\`s into the callbacks of \`onEnter\`, \`onLeave\`, \`onEnterBack\` and \`onLeaveBack\` etc.. You can still link other gsap tween/timelines to it via \`ScrollTrigger.create({animation: })\`. `46:T13f8,chart = { const container = html `

Data is from OurWolrd in Data. It's about the average life expectancy of male and female in 284 countries. This is 1950's data

However, in the 2020s, the average life expectancy moved above 50 years old

` const svg = d3.select(container).append("svg") .attr("id", "chart") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") const marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = 12 const xRange = [marginLeft + inset, width - marginRight - inset] const yRange = [height - marginBottom - inset, marginTop + inset] //////////////////// Scales //////////////////// const xScale = d3.scaleLinear(d3.extent(d3.map(data, d => d.female)), xRange) const yScale = d3.scaleLinear(d3.extent(d3.map(data, d => d.male)), yRange) //////////////////// circles //////////////////// const circles = svg.append("g") .attr("id", "chart-container") .attr("stroke", "none") .attr("stroke-width", 2) .selectAll("circle") .data(data.filter(d => d.Year == 1950)) .join("circle") .attr("class", "animated_circles") .attr("cx", d => xScale(d.female)) .attr("cy", d => yScale(d.male)) .attr("opacity", 0.5) .attr("r", 10) .attr("fill", d => d.female > 60 && d.male > 60 ? "#B3806D": "#FCCE7C") //////////////////// Axis //////////////////// const yAxis = svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(yScale).ticks(height / 50)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start")) const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - marginTop})`) .call(d3.axisBottom(xScale)) .call(g => g.append("text") .attr("x", 0) .attr("y", 10) .attr("text-anchor", "middle") ) //////////////////// Scrolling Animation //////////////////// function enterAnimation() { circles .transition() .duration(1500) .attr("cx", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? xScale(data[i * 2 + 1].female):null }) .attr("cy", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? yScale(data[i * 2 + 1].male):null }) .style('opacity', 0.5) yScale.domain(d3.extent(d3.map(data.filter(d => d.Year == 2020), d => d.male))) yAxis .transition() .delay(1500) .duration(1000) .call(d3.axisLeft(yScale)) xScale.domain(d3.extent(d3.map(data.filter(d => d.Year == 2020), d => d.female))) xAxis.transition() .delay(1500) .duration(1000) .call(d3.axisBottom(xScale)) circles .transition() .delay(1500) .duration(1500) .attr("cx", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? xScale(data[i * 2 + 1].female):null }) .attr("cy", (d, i) => { // console.log(data[i * 2]) return 2 * i + 1 <= 406 ? yScale(data[i * 2 + 1].male):null }) .style('opacity', 0.5) } function enterBackAnimation() { // circles // .transition() // .duration(1500) // .attr("cx", d => xScale(d.female)) // .attr("cy", d => yScale(d.male)) // .style('opacity', 0.5) yScale.domain(d3.extent(d3.map(data, d => d.male))) yAxis .transition() .duration(1000) .call(d3.axisLeft(yScale)) xScale.domain(d3.extent(d3.map(data, d => d.female))) xAxis.transition() .duration(1000) .call(d3.axisBottom(xScale)) circles .transition() .delay(1500) .duration(1500) .attr("cx", (d, i) => { // console.log(data[i * 2]) return 2 * i <= 406 ? xScale(data[i * 2].female):null }) .attr("cy", (d, i) => { // console.log(data[i * 2]) return 2 * i <= 406 ? yScale(data[i * 2].male):null }) .style('opacity', 0.5) } return Object.assign(container, { enterAnimation, enterBackAnimation }) }47:[{"id":"fc7cb32a04a1d483bb721b1fad0c452fd7f48d3fd3cd36acc0e28d921ad4a452e5e1cb3a30773528893dce8ed17bc398e3e93ced5ec1b851e4cd577a636e3e79","href":"https://static.observableusercontent.com/files/fc7cb32a04a1d483bb721b1fad0c452fd7f48d3fd3cd36acc0e28d921ad4a452e5e1cb3a30773528893dce8ed17bc398e3e93ced5ec1b851e4cd577a636e3e79","name":"life-expectancy-of-women-vs-life-expectancy-of-women.csv","type":"text/csv","lastModified":1706673131648.199,"size":2009398}] 43:{"id":"f8347d4d7dce1c14","slug":null,"title":"GSAP ScrollTrigger in Observable","thumbnail":"e5e39ac06e8dba23904d75c5b6c658e4b8a97954ef401289c14d64a0cecbbb7c","access_level":"public","create_time":"$D2024-01-31T03:52:11.648Z","update_time":"$D2024-01-31T03:52:11.648Z","view_time":null,"first_public_time":"$D2024-01-31T03:52:11.648Z","has_unpublished_edits":null,"fork":{"id":"69540217d7f5f859","slug":"gsap-scrolltrigger-in-observable","title":"GSAP ScrollTrigger in Observable","owner":{"id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","bio":"","following":false},"version":1106,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"role":"editor"},{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"52310f35ac74a8b2","slug":"scrollytelling-experiments","title":"Scrollytelling experiments","owner":{"id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace"}},"type":"notebook","body":{"titling":"auto","title":"GSAP ScrollTrigger in Observable","cells":[{"id":559,"value":"# GSAP ScrollTrigger in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1095,"value":"### TL; DR\n\n1. Use Module Debugger's help to import ScrollTrigger\n2. Specify the `scroller` prop in ScrollTrigger\n3. Add `overflow-y: scroll` style to the scroller element of the scroll","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":562,"value":"Inspired by pstuffa‘s [Scrollytelling for Observable](https://observablehq.com/@pstuffa/scrollytelling-for-observable) and Will Chase's [Scrollytelling with GSAP ScrollTrigger](https://www.williamrchase.com/post/scrollytelling-with-gsap-scrolltrigger/), I figured that since I prototype a lot on Observable, maybe I can try to play with ScrollTrigger in Observable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":668,"value":"#### You can actually learn ScrollTrigger itself from the best tutorial, [the GSAP doc](https://greensock.com/docs/v3/Plugins/ScrollTrigger/), so I am going only to demonstrate some settings/properties you might find useful to play with ScrollTrigger in Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"## Import ScrollTrigger","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"With the help of great [module debugger](https://observablehq.com/@observablehq/module-require-debugger), I imported the ScrollTrigger plugin and, of course, GSAP successfully into Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"st = require('gsap@3.9.1/dist/ScrollTrigger.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"ScrollTrigger = st.ScrollTrigger","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"gs = require('gsap@3.9.1/dist/gsap.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"## Trigger the Scroller","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":677,"value":"### 1. `scrollTrigger: {scroller: }`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"The scroller is where the scrolling event/animation takes place. By default, the `scroller` prop of scrollTrigger is the viewport. However, in Observable, you want to set it to some specific element the cell renders \n\nIn the case below. It is the **scrollable** `

` element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"md `\nYou can use a selector like \\`#scroller\\` or just pass the whole html element into \\`scroller\\` like me\n\\`\\`\\`js\n gsap.to(selector, {\n scrollTrigger: {\n scroller: div\n }\n }\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"### 2. `overflow-y:scroll`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":719,"value":"Did I just say **scrollable**?\n\nYeah, when the height/width of child element is longer/wider than its container's/viewport's. You often won't be able to see the \"overflown\" content right? \n\nOne way to solve this is to add [`overflow-y`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) or [`overflow-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) to style the container element. \n\nIn our case, we want to vertically *scroll* to see animation, so we use `overflow-y:scroll` to style to parent `

` element.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"{\n \n const div = html `

GSAP:ScrollTrigger in Observable

\n \n

This element will move.

`\n \n gsap.registerPlugin(ScrollTrigger);\n ScrollTrigger.defaults({\n toggleActions: \"restart pause resume pause\"\n });\n \n const tween = gsap.to(div.querySelector(\".orange p\"), {\n scrollTrigger: {\n trigger: div.querySelector(\".orange\"), \n scroller: div,\n markers: true,\n start: \"top center\",\n end: \"top 150em\",\n scrub: true\n },\n duration: 2, \n x: 500, \n });\n\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"# Scrolling Data Viz Animation Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":793,"value":"To learn ScrollTrigger, I suggest you start with Will Chase's [Scrollytelling with GSAP ScrollTrigger](https://www.williamrchase.com/post/scrollytelling-with-gsap-scrolltrigger/) and [GSAP's own ScrollTrigger doc](https://greensock.com/docs/v3/Plugins/ScrollTrigger/)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":798,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"## Using `ScrollTrigger.create()` in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"### 1. Correctly select GSAP targets in Observable\n\n\nBecause each cell is like a pseudo-function. In each cell's scope, you won't be able to select the element you just created in the cell with GSAP.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":943,"value":"md `\n if you have below\n \\`\\`\\`js\n const svg = d3.create(\"svg\")\n .attr(\"id\", \"chart\")\n ......\n\n gsap.to(\"#chart\", {\n scrollTrigger: {\n trigger: \"selector\",\n ......\n },\n x: 500\n });\n \\`\\`\\`\n\n No tween will happen. In fact, if you check the console (press F12), you can even see *\"#chart not found\"*.\n\n GSAP is not successfully selecting the element is because the element hasn't been rendered yet while GSAP started tweening.\n\n **One way** to get around this is to return the DOM element first using \\`svg.node()\\` and \\`element.querySelector()\\`\n\n \\`\\`\\`js\n gsap.to(svg.node().querySelectorAll('circle.animated_circles')\n \\`\\`\\`\n\n **Another way** is to just write your GSAP code in another cell.\n\n Check the demo below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"chartGSAPTween","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"### 2. Chart-specific animation can be done in `d3.transition` easier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":977,"value":"#### 2.1 Easier Axis Animation done by `d3.transition`\n\nI actually found it a bit hard to animate the axes with GSAP. (I am thinking of animating the ticks, ``, and axis text, `` respectively).\n\n*Please let me know if you have a way to animate axis in a d3 chart with GSAP! Much Appreciated!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1005,"value":"#### 2.2 No Scrub?\n\nIt looks like you can't really scrub the customized animation with `scrub: true` in GSAP. `scrub` is for GSAP tweens only.\n\nTherefore, if you wanna achieve something like scrubbing, you should try to define them in callbacks of `onEnterLeave` or `onLeaveBack`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"scrollTriggerAnimation = { \n gsap.registerPlugin(ScrollTrigger);\n ScrollTrigger.defaults({\n scroller: \"#wrapper\",\n // scrub: true\n });\n ScrollTrigger.create({\n trigger: '#step-1',\n start: 'center center',\n end: () => {\n return `1200px bottom`\n },\n pin: \"svg#chart\",\n markers: true,\n id: 'chart-pin'\n });\n \n// Animate the chart\n ScrollTrigger.create({\n trigger: '#step-2',\n start: 'top top',\n end: \"bottom bottom\",\n onEnter: chart.enterAnimation,\n onEnterBack: chart.enterBackAnimation,\n invalidateOnRefresh: true,\n // markers: true,\n id: 'animate-step-2'\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"### Another way to write CSS in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":921,"value":"import {chartGSAPTween} from \"@tututwo/untitled/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"data0 = FileAttachment(\"life-expectancy-of-women-vs-life-expectancy-of-women.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"data = {\n // const data0 = FileAttachment(\"life-expectancy-of-women-vs-life-expectancy-of-women.csv\").csv()\n data0.forEach(d => {\n d.Year = +d.Year\n d.female = +d[\"Estimates, 1950 - 2020: Annually interpolated demographic indicators - Life expectancy at birth, females (years)\"]\n d.male = +d[\"Estimates, 1950 - 2020: Annually interpolated demographic indicators - Life expectancy at birth, males (years)\"]\n })\n const data = data0\n .filter(d => d.Year == 1950 || d.Year == 2020)\n .filter(d => d.female != 0 && d.male != 0)\n .filter(d => d.Code != \"\")\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"