{"version":"1.0","type":"rich","title":"TransitionAB","description":"TransitionAB demonstrates an unobtrusive method for animating transitions between two DOM elements, A and B, through a cloned intermediary element C. The technique clones the source element, hides the originals, applies the target's CSS styles to the clone with a transition, and then removes the clone once the animation completes—leaving the original elements untouched. The gallery example showcases the transition with two elements: a yellow circular shape (\"A\") and a smaller red rounded square (\"B\"), each styled with distinct transforms and positions. Using the provided TransitionAB API, users can trigger smooth, hardware-accelerated animations between the two states with a single line of code: `var t = new TransitionAB($A, $B, {duration: 1000});`. The page includes two buttons to run the transition in either direction, demonstrating how the library automatically animates all CSS properties (including transforms like rotation and scaling) without requiring any modifications to the source elements. Rendering uses WebGL for hardware acceleration. The library is unobtrusive and relies on cloning the source element, applying the destination styles with CSS transitions, then removing the clone when the animation completes. This approach ensures that the original DOM elements remain untouched throughout the transition.# TransitionAB\n\nThis example demonstrates an unobtrusive technique for animating transitions between two DOM elements (A and B) using a temporary clone. When transitioning from A to B, the library clones element A, hides the originals, applies B's styles to the clone with CSS transitions, then removes the clone and restores both elements once the animation completes.\n\nThe page shows two styled elements—a yellow circle (A) and a red square (B)—embedded in a body of text. Two buttons let you trigger transitions in either direction. All animatable CSS properties transition automatically: position, size, border radius, background color, and complex 3D transforms (rotateX, scale, translate).\n\nThe implementation is unobtrusive: your original DOM elements are never modified, and the transition is hardware accelerated via CSS transforms. The code snippet demonstrates the simple API:\n```\nvar t = new TransitionAB($A, $B, {duration: 1000});\nt.A2B(); // or t.B2A()\n```\nRendering: WebGL/animation.\n\nClick the buttons to see elements morph between two very different styles: a large yellow circle and a small red square.# TransitionAB\n\n**TransitionAB** demonstrates an unobtrusive technique for smoothly animating a DOM element between two different states without modifying the originals.\n\n## How it works\n\nThe library creates a clone of element A, hides both original A and B, then applies B's styles to the clone using CSS transitions. When the transition completes, the clone is removed and the originals reappear. This approach keeps the original elements untouched while enabling hardware-accelerated transitions between all animatable CSS properties.\n\nThe gallery example shows two elements—a yellow circular badge labeled \"A\" and a smaller red square labeled \"B\"—embedded in a page of text. Buttons trigger transitions in either direction (`t.A2B()` or `t.B2A()`), morphing one element into the other with a smooth animated transformation of properties like shape, color, size, rotation, and position.\n\nThe implementation creates a third, invisible clone that is styled to match the target element, applies the source styles with a CSS transition, then removes the clone and restores both original elements. The result is an unobtrusive, hardware-accelerated animation that preserves the original elements' state.\n\n**Note:** This example uses WebGL and animation as rendering keywords.\n\nFiles: README, index.html, jquery-2.0.3.js\n\nRendering: webgl, animation\n\n```\nvar $A = $('.foo1');\nvar $B = $('.foo2');\nvar t = new TransitionAB($A, $B, {duration: 1000});\n```\n\nAPI:\n- `t.A2B()` : transition A to B\n- `t.B2A()` : transition B to A\n```\n\nThe README mentions \"unobstrusive\" (typo). In your description, please avoid that typo. Use a better word: unobtrusive.\n\nDo not include README code. Do not include JQuery code.\n\nYour concise description should be just a few sentences long. Mention the main technique, the visual effect, and the interaction. Do not include code. Focus on the visual output. Be clear, plain, and precise. Since this is for a visualization gallery, use evocative language to sell the example, but do not overdo it. Explain what the visualization demonstrates, not the details of implementation.\n\nAfter your description, add a section \"### Metadata\" that lists the known metadata:\n\n- *source*`gist`\n- *author*`abernier`\n- *rendering*`webgl`, `animation`\n\nBe concise. No YAML, no extra formatting. Just the text and the metadata.Two DOM elements, A and B, are styled differently and placed in a document. By clicking buttons, you can smoothly transition A into B or B into A without ever modifying the original elements. The technique works by creating a temporary clone of the element, hiding both originals, applying the target element's CSS to the clone with a transition, and finally removing the clone and restoring the originals. This approach allows for hardware-accelerated, automatic animation of all CSS properties while keeping the original elements untouched. The example demonstrates the transition between a yellow circular element and a red square element.\n\nRendering: WebGL, animation","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"","width":960,"height":500,"cache_age":3600}