1"use strict";(self.webpackChunkgsap_docs=self.webpackChunkgsap_docs||[]).push([[16123],{28453:(e,t,o)=>{o.d(t,{R:()=>a,x:()=>r});var i=o(96540);const s={},n=i.createContext(s);function a(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(n.Provider,{value:t},e.children)}},35417:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>r,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"Easing/CustomWiggle","title":"CustomWiggle","description":"Description","source":"@site/docs/Easing/CustomWiggle.mdx","sourceDirName":"Easing","slug":"/Eases/CustomWiggle","permalink":"/docs/v3/Eases/CustomWiggle","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"CustomWiggle","slug":"/Eases/CustomWiggle","hide_title":true,"sidebar_custom_props":{"title":"CustomWiggle"}},"sidebar":"docs","previous":{"title":"CustomEase","permalink":"/docs/v3/Eases/CustomEase"},"next":{"title":"ExpoScaleEase","permalink":"/docs/v3/Eases/ExpoScaleEase"}}');var s=o(74848),n=o(28453);const a=JSON.parse('[{"Property":"wiggles","Description":"<span class=\\"config-type\\">Integer</span> - The number of oscillations back and forth. Default: 10."},{"Property":"type","Description":"<span class=\\"config-type\\">String</span> (\u201ceaseOut\u201d | \u201ceaseInOut\u201d | \u201canticipate\u201d | \u201cuniform\u201d | \u201crandom\u201d) - The type (or style) of wiggle (see demo above). Default: \u201ceaseOut\u201d."},{"Property":"amplitudeEase","Description":"<span class=\\"config-type\\">Ease</span> Provides advanced control over the shape of the amplitude (y-axis in the <a href=\\"/ease-visualizer/\\">ease visualizer</a>). You define an ease that controls the amplitude\u2019s progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the \u201ctype\u201d (think of the 5 \u201ctypes\u201d as convenient presets for amplitudeEase and timingEase combinations). See the <a href=\\"//codepen.io/GreenSock/pen/a8a7bc33cf80a74165dd966244a6cc00?editors=0010\\">example CodePen</a> to play around and visualize how it works."},{"Property":"timingEase","Description":"<span class=\\"config-type\\">Ease</span> Provides advanced control over how the waves are plotted over time (x-axis in the <a href=\\"/ease-visualizer/\\">ease visualizer</a>). Defining an timingEase (or amplitudeEase) will override the \u201ctype\u201d (think of the 5 \u201ctypes\u201d as convenient presets for amplitudeEase and timingEase combinations). See the <a href=\\"//codepen.io/GreenSock/pen/a8a7bc33cf80a74165dd966244a6cc00?editors=0010\\">example CodePen</a> to play around and visualize how it works."}]'),r={id:"CustomWiggle",slug:"/Eases/CustomWiggle",hide_title:!0,sidebar_custom_props:{title:"CustomWiggle"}},l=void 0,c={},d=[{value:"Description",id:"description",level:3},{value:"Demo",id:"demo",level:3},{value:"Config Object",id:"config-object",level:3},{value:"Sample code",id:"sample-code",level:3},{value:"Demo collection",id:"demo-collection",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,n.R)(),...e.components},{Codepen:o,SpecialProps:i,TitleBox:l}=t;return o||u("Codepen",!0),i||u("SpecialProps",!0),l||u("TitleBox",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l,{info:r,bucket:"ease",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'//Create a wiggle with 6 oscillations (default type:"easeOut")\nCustomWiggle.create("myWiggle", {wiggles: 6});\n\n//now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began.\ngsap.to(".class", {duration: 2, rotation: 30, ease: "myWiggle"});\n'})})}),"\n",(0,s.jsx)(t.h3,{id:"description",children:"Description"}),"\n",(0,s.jsxs)(t.p,{children:["CustomWiggle extends ",(0,s.jsx)(t.a,{href:"/docs/v3/Eases/CustomEase",children:"CustomEase"})," (which you must include in your project as well), and it lets you set a wiggle amount and type."]}),"\n",(0,s.jsx)(t.admonition,{title:"Ease walkthrough",type:"info",children:(0,s.jsx)("iframe",{className:"video",width:"560",height:"315",src:"https://www.youtube.com/embed/5lk5sLTd6N4",title:"YouTube video player",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0})}),"\n",(0,s.jsx)(t.h3,{id:"demo",children:"Demo"}),"\n",(0,s.jsx)(t.p,{children:"CustomWiggle Types"}),"\n",(0,s.jsx)(o,{height:"400",type:"result",id:"ebdbdadcd678a211681b4aa66cb58c4f"}),"\n",(0,s.jsx)(t.h3,{id:"config-object",children:"Config Object"}),"\n",(0,s.jsx)(i,{items:a}),"\n",(0,s.jsxs)(t.p,{children:["How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to ",(0,s.jsx)(t.code,{children:"rotation:30"})," would be stronger than ",(0,s.jsx)(t.code,{children:"rotation:10"}),". Remember that an ease just controls the ratio of movement toward whatever value you supply for each property in your tween."]}),"\n",(0,s.jsx)(t.h3,{id:"sample-code",children:"Sample code"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'gsap.registerPlugin(CustomEase, CustomWiggle); // register\n\n//Create a wiggle with 6 oscillations (default type:"easeOut")\nCustomWiggle.create("myWiggle", {wiggles: 6});\n\n//now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began.\ngsap.to(".class", {duration: 2, rotation: 30, ease: "myWiggle"});\n\n//Create a 10-wiggle anticipation ease:\nCustomWiggle.create("funWiggle", {wiggles: 10, type: "anticipate"});\ngsap.to(".class", {duration: 2, rotation: 30, ease: "funWiggle"});\n\n//Alternatively, make sure CustomWiggle is loaded and use GSAP\'s string ease format\nease: "wiggle(15)" //<-- easy!\nease: "wiggle({type:anticipate, wiggles:8})" //advanced\n'})}),"\n",(0,s.jsxs)(t.p,{children:['Wiggling isn\'t just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as ',(0,s.jsx)(t.a,{href:"https://codepen.io/GreenSock/pen/wzkBYZ",children:"demonstrated here"}),"."]}),"\n",(0,s.jsx)(t.h3,{id:"demo-collection",children:"Demo collection"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://codepen.io/collection/AxZmqK",children:"CustomWiggle demos"})}),"\n"]})]})}function g(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
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.