[{"data":1,"prerenderedAt":431},["ShallowReactive",2],{"help-\u002Fhelp\u002Ftimeline":3},{"id":4,"title":5,"body":6,"date":416,"description":419,"extension":420,"hidden":421,"meta":422,"navigation":83,"path":426,"seo":427,"sitemap":428,"stem":429,"__hash__":430},"help\u002Fhelp\u002Ftimeline.md","Timeline Guide for HTML5 Banner Animation",{"type":7,"value":8,"toc":407},"minimark",[9,13,18,21,44,51,59,66,91,98,102,105,108,111,136,139,147,151,154,157,184,187,206,209,213,216,252,255,259,262,384,392,400],[10,11,12],"p",{},"The timeline is the main place to edit animation timing in Foldwrap.\nEach element in your creative appears as an interactive timeline row.",[14,15,17],"h2",{"id":16},"timeline-animation-modes","Timeline animation modes",[10,19,20],{},"Timeline rows can be in three animation modes:",[22,23,24,32,38],"ul",{},[25,26,27,31],"li",{},[28,29,30],"strong",{},"Auto-animation (preset)",": pastel color",[25,33,34,37],{},[28,35,36],{},"Custom animation",": vivid color",[25,39,40,43],{},[28,41,42],{},"Keyframe animation",": vivid color with keyframe markers",[10,45,46,47,50],{},"If you move or resize a timeline item manually, it switches to ",[28,48,49],{},"custom animation"," for that element.",[10,52,53,54,58],{},"You can switch an item to keyframes from timeline right-click menu: ",[55,56,57],"code",{},"Convert to Keyframes",".",[10,60,61,62,65],{},"To return the element to preset behavior, click ",[55,63,64],{},"Reset animation"," in animation controls.",[67,68,78,79],"div",{"className":69},[70,71,72,73,74,75,76,77],"flex","justify-center","items-center","my-6","sw-full","md:w-2\u002F3","md:m-auto","md:my-6","\n   ",[80,81,85,86,78],"video",{"loading":82,"controls":83,"autoPlay":83,"muted":83,"loop":83,"playsInline":83,"ariaLabel":84},"lazy",true,"Basic timeline operations for animation edits in Foldwrap","\n      ",[87,88],"source",{"type":89,"src":90},"video\u002Fmp4","\u002Fgfx\u002Fhelp\u002Ftimeline\u002Ftimeline-copy-and-paste.mp4",[67,92,97],{"className":93},[94,95,96],"text-center","text-sm","my-4","Video shows basic timeline operations in the Foldwrap editor",[14,99,101],{"id":100},"keyframes","Keyframes",[10,103,104],{},"For advanced motion control, use keyframes.",[10,106,107],{},"With keyframes, you can animate position, scale, opacity, and rotation at multiple points in time and fine-tune easing between points.",[10,109,110],{},"From timeline context menus, you can:",[22,112,113,124,127,130],{},[25,114,115,116,119,120,123],{},"add keyframes (",[55,117,118],{},"Add Keyframe at Playhead",", ",[55,121,122],{},"Add Keyframe Here",")",[25,125,126],{},"retime by dragging keyframe markers",[25,128,129],{},"set easing per segment",[25,131,132,133],{},"convert back with ",[55,134,135],{},"Convert to Simple Animation",[10,137,138],{},"Keyframed elements must keep at least 2 keyframes.",[10,140,141,142,58],{},"Learn more in ",[143,144,146],"a",{"href":145},"\u002Fhelp\u002Fanimation","Animation modes and keyframes",[14,148,150],{"id":149},"copy-and-paste-animation","Copy and paste animation",[10,152,153],{},"If you need consistent motion across multiple elements, right-click a timeline item, copy its animation, then paste it to another item.",[10,155,156],{},"When animation is copied, timeline paste options include:",[158,159,160,166,172,178],"ol",{},[25,161,162,165],{},[28,163,164],{},"Paste Animation (keep timing)"," - applies source motion while preserving target timing.",[25,167,168,171],{},[28,169,170],{},"Paste Entrance Only"," - applies only entrance behavior.",[25,173,174,177],{},[28,175,176],{},"Paste Exit Only"," - applies only exit behavior.",[25,179,180,183],{},[28,181,182],{},"Paste Animation (full)"," - applies full copied animation.",[10,185,186],{},"You can also paste animation across variants in the same editor session.",[10,188,189,190,193,194,197,198,201,202,205],{},"The same right-click menu also has ",[55,191,192],{},"Duplicate"," right below ",[55,195,196],{},"Copy Animation",", and ",[55,199,200],{},"Entrance"," \u002F ",[55,203,204],{},"Exit"," submenus for quickly swapping in a different preset without leaving the timeline.",[10,207,208],{},"This workflow helps freelancers speed up revisions and helps agencies keep motion patterns consistent across campaign sizes.",[14,210,212],{"id":211},"lock-elements","Lock elements",[10,214,215],{},"Lock an element from the timeline when you want it out of the way — a finished background, an approved logo, anything you don't want to select or move by accident while you work on the rest of the creative.",[22,217,218,225,232,238],{},[25,219,220,221,224],{},"Right-click a timeline row and choose ",[55,222,223],{},"Lock",". With several elements selected, this locks all of them.",[25,226,227,228,231],{},"A locked row shows a small padlock before its bar. Click the padlock, or right-click the row and choose ",[55,229,230],{},"Unlock",", to unlock it again.",[25,233,234,237],{},[55,235,236],{},"Ctrl\u002FCmd + Shift + L"," locks the current selection.",[25,239,240,241,244,245,248,249,251],{},"The ",[28,242,243],{},"Layers"," tab in the editor sidebar (",[55,246,247],{},"Alt\u002FOption + 2",") has the same padlock and right-click ",[55,250,223],{},", including for layers nested inside groups.",[10,253,254],{},"A locked element can't be selected, dragged, or resized on the canvas, and its timeline row can't be dragged, resized, or retimed either — the padlock icon and the row's right-click menu are the only way to interact with it.",[14,256,258],{"id":257},"keyboard-shortcuts","Keyboard shortcuts",[10,260,261],{},"Select one or more timeline items, position the playhead, then use these to adjust timing without reaching for the mouse:",[263,264,265,278],"table",{},[266,267,268],"thead",{},[269,270,271,275],"tr",{},[272,273,274],"th",{},"Shortcut",[272,276,277],{},"Action",[279,280,281,292,302,312,322,332,341,351,361,374],"tbody",{},[269,282,283,289],{},[284,285,286],"td",{},[55,287,288],{},"[",[284,290,291],{},"Move the selected element(s) so their start lines up with the playhead. Duration is kept.",[269,293,294,299],{},[284,295,296],{},[55,297,298],{},"]",[284,300,301],{},"Move the selected element(s) so they finish exiting exactly at the playhead. Duration is kept.",[269,303,304,309],{},[284,305,306],{},[55,307,308],{},"Alt + [",[284,310,311],{},"Trim the entrance to the playhead. The exit timing stays put, so duration changes.",[269,313,314,319],{},[284,315,316],{},[55,317,318],{},"Alt + ]",[284,320,321],{},"Trim the exit so it finishes exactly at the playhead. The entrance timing stays put, so duration changes.",[269,323,324,329],{},[284,325,326],{},[55,327,328],{},"Ctrl\u002FCmd + D",[284,330,331],{},"Duplicate the selected element(s).",[269,333,334,338],{},[284,335,336],{},[55,337,236],{},[284,339,340],{},"Lock the selected element(s).",[269,342,343,348],{},[284,344,345],{},[55,346,347],{},"Shift + C",[284,349,350],{},"Copy animation from the selected element.",[269,352,353,358],{},[284,354,355],{},[55,356,357],{},"Shift + V",[284,359,360],{},"Paste animation to the selected element(s).",[269,362,363,371],{},[284,364,365,201,368],{},[55,366,367],{},"Backspace",[55,369,370],{},"Delete",[284,372,373],{},"Delete the selected element or keyframe.",[269,375,376,381],{},[284,377,378],{},[55,379,380],{},"t",[284,382,383],{},"Expand \u002F collapse the timeline.",[10,385,386,388,389,391],{},[55,387,288],{}," and ",[55,390,298],{}," never push an element before 0:00 - if the move would do that, the element is clamped to start at 0:00 and keeps its full duration instead.",[10,393,394,395,388,397,399],{},"With several elements selected, ",[55,396,288],{},[55,398,298],{}," keep every element's timing relative to the others: they all shift by the same amount, anchored on the last element you selected.",[10,401,402,388,404,406],{},[55,403,308],{},[55,405,318],{}," only work on auto-animation and custom animation items - a keyframed item has no single duration to trim.",{"title":408,"searchDepth":409,"depth":409,"links":410},"",2,[411,412,413,414,415],{"id":16,"depth":409,"text":17},{"id":100,"depth":409,"text":101},{"id":149,"depth":409,"text":150},{"id":211,"depth":409,"text":212},{"id":257,"depth":409,"text":258},{"published":417,"modified":418},"2025-04-19","2026-09-26","Learn how to edit animation timing in the Foldwrap timeline, switch between auto\u002Fcustom\u002Fkeyframe modes, and reuse motion across elements.","md",false,{"layout":423,"h1":424,"keywords":425},"blog","Use the Foldwrap Timeline for Faster Animation Edits","animation timeline, html5 banner timeline, keyframe editing, foldwrap help","\u002Fhelp\u002Ftimeline",{"title":5,"description":419},{"loc":426},"help\u002Ftimeline","ulkZS2l8oVHiKYin1zXnVHmNpQ2gK1BIxGhqcBUPH4I",1790456171221]