GSAP Timeline

GSAP Timeline Example

\\n\\n

\\n

GSAP Timeline Animation

\\n\\n

\\n

Timeline Position Parameter

\\n\\n

\\n

\\n\\n\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"e769a15a-b9d2-402a-b4bf-a29c14360af8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Explanation:","styles":{}}],"children":[]},{"id":"c9dd5ca4-45f3-4da2-a069-4d95e7d1a6c5","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Value","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Meaning","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"\"-=0.5\"","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Start animation ","styles":{}},{"type":"text","text":"0.5 seconds earlier","styles":{"bold":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"\"+=0.5\"","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Start animation ","styles":{}},{"type":"text","text":"0.5 seconds later","styles":{"bold":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"af615f13-8a76-4185-8031-07cd1e834f51","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Timeline Labels","styles":{}}],"children":[]},{"id":"01e7f6c4-0dd6-4b46-a3e2-843026c8f9e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Labels create ","styles":{}},{"type":"text","text":"named points in the timeline","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"50d64320-9024-4433-9818-23be925ea8f5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Example","styles":{}}],"children":[]},{"id":"83701674-8a78-4b98-ba4c-5c236393c9a0","type":"procode","props":{"code":"const tl = gsap.timeline();\n\ntl.add(\"start\")\n\n.to(\".box1\", {\n x:200,\n duration:1\n})\n\n.to(\".box2\", {\n y:80,\n duration:1\n}, \"start\");","language":"javascript","filename":"","files":"[{\"id\":\"ez9t691jh\",\"name\":\"code\",\"code\":\"const tl = gsap.timeline();\\n\\ntl.add(\\\"start\\\")\\n\\n.to(\\\".box1\\\", {\\n x:200,\\n duration:1\\n})\\n\\n.to(\\\".box2\\\", {\\n y:80,\\n duration:1\\n}, \\\"start\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2bbb738b-852b-4761-a44a-18ce466938b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0cfd485e-6d76-48c1-802c-e10892da84f4","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n GSAP Timeline Labels\\n\\n \\n\\n \\n\\n\\n\\n\\n\\n

GSAP Timeline Labels

\\n\\n

\\n

\\n\\n\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"c182e55f-3f38-4f60-b288-5cd042c98925","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both animations start at the ","styles":{}},{"type":"text","text":"same labeled position","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3478da0c-515d-4c70-a730-1ebe348612a4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Timeline Control Methods","styles":{}}],"children":[]},{"id":"facbe53c-ec9b-4b92-b814-9f07d59dd29c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Timelines can be controlled like tweens.","styles":{}}],"children":[]},{"id":"ae7390d2-ebd2-4845-bd13-b7d7c45f0995","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Method","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":".play()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Start animation","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":".pause()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Pause animation","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":".reverse()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Play backwards","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":".restart()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Restart animation","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":".seek()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Jump to a specific time","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":".progress()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Set animation progress","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"ab96030c-2294-48fb-96de-4413e77f1fb1","type":"divider","props":{},"children":[]},{"id":"cc2f7b4c-d847-4daf-ab78-7c9685b3882b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example","styles":{}}],"children":[]},{"id":"9596febc-1aea-4326-8df6-8580140c5b26","type":"procode","props":{"code":"const tl = gsap.timeline({ paused:true });\n\ntl.to(\".box\",{\n x:300,\n duration:2\n});\n\ntl.play();","language":"javascript","filename":"","files":"[{\"id\":\"dffa2fxtm\",\"name\":\"code\",\"code\":\"const tl = gsap.timeline({ paused:true });\\n\\ntl.to(\\\".box\\\",{\\n x:300,\\n duration:2\\n});\\n\\ntl.play();\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d3dbce6-731a-41df-b7f6-ac33029b08f6","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n GSAP Timeline Controls\\n\\n \\n\\n \\n\\n\\n\\n\\n\\n

GSAP Timeline Control Methods

\\n\\n

\\n

\\n\\n

\\n \\n \\n \\n \\n \\n \\n

GSAP Timeline Options

\\n\\n

\\n