[{"data":1,"prerenderedAt":556},["ShallowReactive",2],{"help-\u002Fhelp\u002Fanimation":3,"help_more":527},{"id":4,"title":5,"body":6,"date":511,"description":514,"extension":515,"hidden":516,"meta":517,"navigation":521,"path":522,"seo":523,"sitemap":524,"stem":525,"__hash__":526},"help\u002Fhelp\u002Fanimation.md","HTML5 Ad Animation Modes: Auto, Custom, and Keyframes",{"type":7,"value":8,"toc":497},"minimark",[9,13,30,33,59,64,72,75,78,86,89,92,100,103,106,114,118,175,179,196,200,203,206,232,235,239,246,251,304,315,319,322,374,377,380,384,387,452,455,459,473,477,494],[10,11,12],"p",{},"In Foldwrap, animation is edited in two places:",[14,15,16,24],"ul",{},[17,18,19,23],"li",{},[20,21,22],"strong",{},"Timeline"," for timing, ordering, drag\u002Fresize, and context menu actions.",[17,25,26,29],{},[20,27,28],{},"Animate tab"," (right panel) for entrance\u002Fexit parameters, keyframe values, and mode switch.",[10,31,32],{},"Each creative element has its own timeline row, and row color shows which animation mode is active.",[34,35,41,54],"div",{"className":36},[37,38,39,40],"flex","flex-col","items-center","my-6",[34,42,46],{"className":43},[44,45],"w-full","md:w-3\u002F4",[10,47,48],{},[49,50],"img",{"alt":51,"src":52,"title":53},"Timeline view showing auto, custom, and keyframe animation modes in Foldwrap","\u002Fgfx\u002Fhelp\u002Fanimation\u002Fanimation_types.png","Auto, custom, and keyframe animation modes in the Foldwrap timeline",[55,56,53],"span",{"className":57},[58],"text-sm",[60,61,63],"h2",{"id":62},"three-animation-types","Three animation types",[65,66,67],"ol",{},[17,68,69],{},[20,70,71],{},"Auto-animation (presets)",[10,73,74],{},"Pastel timeline color. Motion is generated automatically from your selected preset (for example Fade, Swift Slide, Bouncy Rebound) and element timing.",[10,76,77],{},"Use this when you need fast output and consistent motion across many ad sizes.",[65,79,81],{"start":80},2,[17,82,83],{},[20,84,85],{},"Custom animation",[10,87,88],{},"Vivid timeline color. This mode starts when you manually change animation parameters (for example start\u002Fend timing, duration, appear\u002Fdisappear values, or drag\u002Fresize timeline items).",[10,90,91],{},"Use this when one element needs specific timing or motion that differs from preset behavior.",[65,93,95],{"start":94},3,[17,96,97],{},[20,98,99],{},"Keyframe animation",[10,101,102],{},"Vivid timeline color with keyframe markers. Instead of only appear\u002Fdisappear behavior, motion is controlled by multiple keyframes across time.",[10,104,105],{},"Use this when you need precise motion paths, multi-step movement, or advanced transitions.",[10,107,108,109,113],{},"For timeline controls, read ",[110,111,22],"a",{"href":112},"\u002Fhelp\u002Ftimeline",".",[60,115,117],{"id":116},"how-to-switch-between-modes","How to switch between modes",[14,119,120,123,126,147,162,169],{},[17,121,122],{},"Start with auto-animation by choosing an animation preset for the creative.",[17,124,125],{},"Any manual timing or motion tweak on an item switches it to custom animation.",[17,127,128,129],{},"Switch to keyframes using either:\n",[14,130,131,141],{},[17,132,133,136,137,140],{},[134,135,99],"code",{}," toggle in the ",[20,138,139],{},"Animate"," panel, or",[17,142,143,144,113],{},"timeline right-click menu: ",[134,145,146],{},"Convert to Keyframes",[17,148,149,150,153,154,157,158,161],{},"In keyframe mode, add frames with ",[134,151,152],{},"Add keyframe"," (Animate panel), ",[134,155,156],{},"Add Keyframe at Playhead",", or ",[134,159,160],{},"Add Keyframe Here"," from timeline context menus.",[17,163,164,165,168],{},"Use ",[134,166,167],{},"Convert to Simple Animation"," to leave keyframe mode but keep editable simple animation values.",[17,170,164,171,174],{},[134,172,173],{},"Reset animation"," to return the selected item to preset-driven behavior.",[60,176,178],{"id":177},"keyframe-basics","Keyframe basics",[14,180,181,184,187,190,193],{},[17,182,183],{},"Add keyframes from the Animate panel or timeline context menu.",[17,185,186],{},"Drag keyframes to retime motion.",[17,188,189],{},"Keyframes stay in chronological order and snap in small time steps for precise edits.",[17,191,192],{},"A keyframed item must keep at least 2 keyframes.",[17,194,195],{},"Best for non-linear movement, staged reveals, CTA timing polish, and advanced transitions.",[60,197,199],{"id":198},"copy-and-paste-animation","Copy and paste animation",[10,201,202],{},"You can copy animation from one element and paste it to another element, including across variants in the same session.",[10,204,205],{},"Options:",[65,207,208,214,220,226],{},[17,209,210,213],{},[20,211,212],{},"Paste Animation (keep timing)"," - applies source motion while preserving target timing.",[17,215,216,219],{},[20,217,218],{},"Paste Entrance Only"," - applies only entrance behavior.",[17,221,222,225],{},[20,223,224],{},"Paste Exit Only"," - applies only exit behavior.",[17,227,228,231],{},[20,229,230],{},"Paste Animation (full)"," - applies full copied animation.",[10,233,234],{},"This is useful when you need consistent motion across many banners while keeping each layout structure intact.",[60,236,238],{"id":237},"copy-motion-from-another-size","Copy motion from another size",[10,240,241,242,245],{},"Copy\u002Fpaste above moves one element's animation. When a whole size needs the motion you already approved on another size, use ",[20,243,244],{},"Copy motion from…"," instead — it matches the layers between the two sizes and copies the animation for all of them at once.",[247,248,250],"h3",{"id":249},"how-to-run-it","How to run it",[65,252,253,256,267,272,275,298],{},[17,254,255],{},"Open the size you want to change. The copy always writes into the size you are looking at, never into the others.",[17,257,258,259],{},"Open the variant menu, either way:\n",[14,260,261,264],{},[17,262,263],{},"click the variant name in the breadcrumb at the top of the editor, or",[17,265,266],{},"right-click the variant in the variants sidebar.",[17,268,269,270,113],{},"Choose ",[134,271,244],{},[17,273,274],{},"Pick the size to copy from.",[17,276,277,278],{},"Leave all three boxes ticked to copy everything, or untick what should stay as it is:\n",[14,279,280,286,292],{},[17,281,282,285],{},[20,283,284],{},"Per-element motion"," — entrances, exits and keyframes.",[17,287,288,291],{},[20,289,290],{},"Per-element timing"," — when each element appears and how long it stays.",[17,293,294,297],{},[20,295,296],{},"Creative-level"," — the animation preset, frame delay and loop count of the whole banner.",[17,299,300,301,113],{},"Press ",[134,302,303],{},"Apply",[10,305,306,307,310,311,314],{},"Layout is never touched. Positions, sizes and text stay exactly as they are in the size you applied to — only motion and timing are copied. Like any other edit, it can be undone with ",[134,308,309],{},"Ctrl\u002FCmd+Z",", and the review label in the timeline has an ",[134,312,313],{},"undo"," button of its own.",[247,316,318],{"id":317},"read-the-result-before-you-ship","Read the result before you ship",[10,320,321],{},"After the copy, every timeline row shows what happened to it, and the labels stay until you change something else:",[323,324,325,338],"table",{},[326,327,328],"thead",{},[329,330,331,335],"tr",{},[332,333,334],"th",{},"Marker",[332,336,337],{},"Meaning",[339,340,341,350,358,366],"tbody",{},[329,342,343,347],{},[344,345,346],"td",{},"Green circle check",[344,348,349],{},"Every element in that row found its counterpart and took its motion",[329,351,352,355],{},[344,353,354],{},"Amber triangle",[344,356,357],{},"Some elements in that row matched, some did not",[329,359,360,363],{},[344,361,362],{},"Amber circle minus",[344,364,365],{},"Nothing in that row could be matched, so nothing was changed",[329,367,368,371],{},[344,369,370],{},"Gray lock",[344,372,373],{},"Skipped because the element is locked",[10,375,376],{},"Hover a marker to see the element names and the reason each one was or was not matched. Click it to clear the review.",[10,378,379],{},"Do not skip this step on client work. An amber triangle means part of that group is still holding its old animation.",[247,381,383],{"id":382},"improve-your-chances-of-a-clean-match","Improve your chances of a clean match",[10,385,386],{},"Foldwrap pairs elements by what they are, not by where they sit. A few habits make almost every element match:",[14,388,389,399,413,419,440,446],{},[17,390,391,394,395,398],{},[20,392,393],{},"Build sizes from one master."," Sizes made with ",[134,396,397],{},"Duplicate",", with AI resize, or from spreadsheet data keep their connection to the original and match nearly perfectly. Sizes built separately from scratch have the least in common.",[17,400,401,404,405,408,409,412],{},[20,402,403],{},"Keep layer names the same across sizes."," ",[134,406,407],{},"CTA"," in one size and ",[134,410,411],{},"CTA button"," in another are two different elements as far as matching is concerned. Renaming in Figma before import, or in Foldwrap afterwards, both work — just keep them consistent.",[17,414,415,418],{},[20,416,417],{},"Keep the same grouping."," An element inside a group in one size and loose in another is harder to pair. Matching follows the group structure.",[17,420,421,424,425,428,429,432,433,432,436,439],{},[20,422,423],{},"Give duplicates distinct names."," Three elements called ",[134,426,427],{},"Rectangle 12"," in the same group can only be told apart by their order. If that order differs between sizes, they may be left unmatched. ",[134,430,431],{},"star-left",", ",[134,434,435],{},"star-mid",[134,437,438],{},"star-right"," always match.",[17,441,442,445],{},[20,443,444],{},"Reuse the same images."," An image placed from the same asset in both sizes is recognised even if it was renamed.",[17,447,448,451],{},[20,449,450],{},"Lock what you tuned by hand."," A locked element is skipped and reported as skipped, so a hand-timed hero animation survives a copy onto the rest of the size.",[10,453,454],{},"When two elements are equally plausible, Foldwrap deliberately leaves the element alone and flags the row for review rather than guessing. Rename one of them and run it again — that is usually the whole fix.",[247,456,458],{"id":457},"when-to-use-it","When to use it",[14,460,461,464,467,470],{},[17,462,463],{},"A size was adapted by hand and now needs the campaign's approved motion.",[17,465,466],{},"The client changed the timing after the set was already built — fix one size, apply to the rest.",[17,468,469],{},"Sizes came from separate Figma frames and have drifted apart.",[17,471,472],{},"A late format was added to an otherwise finished campaign.",[60,474,476],{"id":475},"recommended-workflow","Recommended workflow",[65,478,479,482,485,488],{},[17,480,481],{},"Start with an auto-animation preset to generate a fast first draft.",[17,483,484],{},"Adjust only the elements that need custom timing.",[17,486,487],{},"Use keyframes for hero elements, CTA moments, and complex transitions.",[17,489,490,491,493],{},"Reuse animation with copy\u002Fpaste for single elements, or ",[134,492,244],{}," to bring a whole size in line with an approved one.",[10,495,496],{},"This workflow helps freelancers close revisions faster and helps agencies keep output quality consistent at scale.",{"title":498,"searchDepth":80,"depth":80,"links":499},"",[500,501,502,503,504,510],{"id":62,"depth":80,"text":63},{"id":116,"depth":80,"text":117},{"id":177,"depth":80,"text":178},{"id":198,"depth":80,"text":199},{"id":237,"depth":80,"text":238,"children":505},[506,507,508,509],{"id":249,"depth":94,"text":250},{"id":317,"depth":94,"text":318},{"id":382,"depth":94,"text":383},{"id":457,"depth":94,"text":458},{"id":475,"depth":80,"text":476},{"published":512,"modified":513},"2026-02-19","2026-09-14","Learn when to use auto-animation, custom timing, and keyframes in Foldwrap, and how to copy motion from one banner size onto another.","md",false,{"layout":518,"h1":519,"keywords":520},"blog","Foldwrap Animation: Auto, Custom, and Keyframe Modes","html5 ad animation, banner animation timeline, keyframe animation, copy animation between banner sizes, foldwrap help",true,"\u002Fhelp\u002Fanimation",{"title":5,"description":514},{"loc":522},"help\u002Fanimation","sCQtonPqsUqGStg9BqwU8pCOmnxjWiHumQk2CQD6UMA",[528,533,535,541,546,551],{"date":529,"path":531,"title":532},{"published":530},"2026-08-31","\u002Fhelp\u002Fcampaigns","Campaigns: group creatives into one delivery",{"date":534,"path":522,"title":5},{"published":512,"modified":513},{"date":536,"path":539,"title":540},{"published":537,"modified":538},"2025-06-25","2026-02-27","\u002Fhelp\u002Ffigma-integration","Import design from Figma to Foldwrap",{"date":542,"path":544,"title":545},{"published":543,"modified":538},"2025-06-03","\u002Fhelp\u002Fassets-upload","How to Upload Logo, Images, and Video Assets",{"date":547,"path":549,"title":550},{"published":548,"modified":538},"2025-04-20","\u002Fhelp\u002Fclick","How to Set Click-Through Links for HTML5 Banner Ads",{"date":552,"path":112,"title":555},{"published":553,"modified":554},"2025-04-19","2026-09-13","Timeline Guide for HTML5 Banner Animation",1789678294812]