1"use strict";(self.webpackChunkgsap_docs=self.webpackChunkgsap_docs||[]).push([[23707],{28453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var i=t(96540);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}},96042:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"Plugins/EaselPlugin/Easel","title":"Easel","description":"Description","source":"@site/docs/Plugins/EaselPlugin/EaselPlugin.mdx","sourceDirName":"Plugins/EaselPlugin","slug":"/Plugins/EaselPlugin","permalink":"/docs/v3/Plugins/EaselPlugin","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"Easel","slug":"/Plugins/EaselPlugin","hide_title":true,"sidebar_custom_props":{"title":"EaselPlugin"}},"sidebar":"docs","previous":{"title":"DrawSVGPlugin.getPosition()","permalink":"/docs/v3/Plugins/DrawSVGPlugin/static.getPosition()"},"next":{"title":"GSDevTools","permalink":"/docs/v3/Plugins/GSDevTools"}}');var s=t(74848),o=t(28453);const r={id:"Easel",slug:"/Plugins/EaselPlugin",hide_title:!0,sidebar_custom_props:{title:"EaselPlugin"}},l=void 0,a={},c=[{value:"Description",id:"description",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",pre:"pre",...(0,o.R)(),...e.components},{TitleBox:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("TitleBox",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t,{info:r,children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"gsap.ticker.add(() => stage.update());\n\ngsap.to(circle, {\n duration: 2,\n scaleX: 0.5,\n scaleY: 0.5,\n easel: { tint: 0x00ff00 },\n});\n"})})}),"\n",(0,s.jsx)(n.h3,{id:"description",children:"Description"}),"\n",(0,s.jsxs)(n.p,{children:["Tweens special EaselJS-related properties for things like ",(0,s.jsx)(n.code,{children:"saturation"}),", ",(0,s.jsx)(n.code,{children:"contrast"}),", ",(0,s.jsx)(n.code,{children:"tint"}),", ",(0,s.jsx)(n.code,{children:"colorize"}),", ",(0,s.jsx)(n.code,{children:"brightness"}),", ",(0,s.jsx)(n.code,{children:"exposure"}),", and ",(0,s.jsx)(n.code,{children:"hue"})," which leverage EaselJS's ",(0,s.jsx)(n.code,{children:"ColorFilter"})," and ",(0,s.jsx)(n.code,{children:"ColorMatrixFilter"})," (see ",(0,s.jsx)(n.a,{href:"//www.createjs.com/#!/EaselJS",children:"the EaselJS website"})," for more information about EaselJS). You don't need the plugin to tween normal numeric properties of EaselJS objects (like ",(0,s.jsx)(n.code,{children:"x"})," and ",(0,s.jsx)(n.code,{children:"y"}),"), but some filters or effects require special manipulation which is what EaselPlugin is for. Currently it only handles special properties related to ",(0,s.jsx)(n.code,{children:"ColorFilter"})," and ",(0,s.jsx)(n.code,{children:"ColorMatrixFilter"}),", and it can tween the ",(0,s.jsx)(n.code,{children:"frame"})," property of a ",(0,s.jsx)(n.code,{children:"MovieClip"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["GreenSock's EaselPlugin exposes convenient properties that aren't a part of EaselJS's API like ",(0,s.jsx)(n.code,{children:"tint"}),", ",(0,s.jsx)(n.code,{children:"tintAmount"}),", ",(0,s.jsx)(n.code,{children:"exposure"}),", and ",(0,s.jsx)(n.code,{children:"brightness"})," for ",(0,s.jsx)(n.code,{children:"ColorFilter"}),", as well as ",(0,s.jsx)(n.code,{children:"saturation"}),", ",(0,s.jsx)(n.code,{children:"hue"}),", ",(0,s.jsx)(n.code,{children:"contrast"}),", ",(0,s.jsx)(n.code,{children:"colorize"}),", and ",(0,s.jsx)(n.code,{children:"colorizeAmount"})," for ",(0,s.jsx)(n.code,{children:"ColorMatrixFilter"}),". Simply wrap the values that you'd like to tween in an ",(0,s.jsx)(n.code,{children:"easel: {}"})," object. Here are some examples:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'//setup stage and create a Shape into which we\'ll draw a circle later...\nvar canvas = document.getElementById("myCanvas"),\n stage = new createjs.Stage(canvas),\n circle = new createjs.Shape(),\n g = circle.graphics;\n\n//draw a red circle in the Shape\ng.beginFill(createjs.Graphics.getRGB(255, 0, 0));\ng.drawCircle(0, 0, 100);\ng.endFill();\n\n//in order for the ColorFilter to work, we must cache() the circle\ncircle.cache(-100, -100, 200, 200);\n\n//place the circle at 200,200\ncircle.x = 200;\ncircle.y = 200;\n\n//add the circle to the stage\nstage.addChild(circle);\n\n//setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick\ngsap.ticker.add(() =>
1 stage.update());\nstage.update();\n\n//tween the tint of the circle to green and scale it to half-size\ngsap.to(circle, {\n duration: 2,\n scaleX: 0.5,\n scaleY: 0.5,\n easel: { tint: 0x00ff00 },\n});\n\n//tween to a different tint that is only 50% (mixing with half of the original color) and animate the scale, position, and rotation simultaneously.\ngsap.to(circle, {\n duration: 3,\n scaleX: 1.5,\n scaleY: 0.8,\n x: 250,\n y: 150,\n rotation: 180,\n easel: { tint: "#0000FF", tintAmount: 0.5 },\n delay: 3,\n ease: "elastic",\n});\n\n//then animate the saturation down to 0\ngsap.to(circle, { duration: 2, easel: { saturation: 0 }, delay: 6 });\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can also tween any individual properties of the ",(0,s.jsx)(n.code,{children:"ColorFilter"})," object like this:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"gsap.to(circle, {\n duration: 3,\n easel: {\n colorFilter: { redMultiplier: 0.5, blueMultiplier: 0.8, greenOffset: 100 },\n },\n});\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Or you can tween things like the ",(0,s.jsx)(n.code,{children:"exposure"})," of an image which is a value from 0-2 where 1 is normal exposure, 2 is completely overexposed (white) and 0 is completely underexposed (black). Or define a ",(0,s.jsx)(n.code,{children:"brightness"})," value which uses the same concept: a value from 0-2. These effects can be very useful for images in particular."]}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsx)(n.mdxAdmonitionTitle,{}),(0,s.jsxs)(n.p,{children:["A common mistake is to forget to wrap EaselJS-related properties in an easel object which is essential for specifying your intent. You also must load the EaselJS's ",(0,s.jsx)(n.code,{children:"ColorFilter"})," and/or ",(0,s.jsx)(n.code,{children:"ColorMatrixFilter"})," JavaScript files."]})]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.