2e:null 2f:["$","title",null,{"children":"Smooth stylistic animation with filters | Dennis Hotson | Observable"}] 34:[] 32:{"id":"b0a0a486114754cb","slug":"smooth-animation-using-a-filter","title":"Smooth stylistic animation with filters","thumbnail":"f5dc0998b3c6fe811e121f17710a4d6e613e2bc5d25a49a379051ed17889ff60","access_level":"public","create_time":"$D2018-03-07T05:04:57.820Z","update_time":"$D2020-04-02T12:32:38.775Z","view_time":null,"first_public_time":"$D2018-07-31T16:43:50.812Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"dfc54db9de0ee0aa","login":"dhotson","name":"Dennis Hotson","avatar_url":"https://avatars-next.observableusercontent.com/069ba6d1feec2808029d057214f1c4615ad2f9b140bd25cfd42a426494aad252","tier":"starter_2024"},"version":446,"publish_version":446,"role":null,"authored":false,"authors":[{"type":"individual","id":"c099467537f28e13","login":"dhotson","name":"Dennis Hotson","avatar_url":"https://avatars-next.observableusercontent.com/069ba6d1feec2808029d057214f1c4615ad2f9b140bd25cfd42a426494aad252","tier":null}],"members":[{"type":"individual","id":"c099467537f28e13","login":"dhotson","name":"Dennis Hotson","avatar_url":"https://avatars-next.observableusercontent.com/069ba6d1feec2808029d057214f1c4615ad2f9b140bd25cfd42a426494aad252","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Smooth stylistic animation with filters","cells":[{"id":0,"value":"md`# Smooth stylistic animation with filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`A filter is a technique that can animate elements with stylised ease-in-and-out in a way that can be interrupted without jank.\n\nA filter is represented as an array of numbers where the shape defines the style of easing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"filter = {\n const filter = createSineFilter(50); // Animation lasts for 75 frames. adjust this to change the animation speed\n const sum = filter.reduce((sum, e) => e + sum, 0);\n return filter.map(e => e / sum); // normalised to add up to 1\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"{\n const max = filter.reduce((max,e) => e > max ? e : max, 0);\n return svg`