Create Smooth Theme Transitions with Figma AnimationsCreate Smooth Theme Transitions with Figma Animations
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Gauravi's avatar
Gauravi Kumari
• 19h
My submission for #configmakeathon Hi I am Gauravi , a ux ui designer and a computer science engineer. Here are the prompts and process I used. prompts I used in @Figma make prompt 1 : Select the moon icon in the top right of the 'Night - Light On' frame. On click, navigate to 'Day - Light On'. Use Smart Animate with a 'Custom Cubic Bezier' (0.4, 0, 0.2, 1) over 700ms. Ensure the glass dome glows and background gradients morph smoothly prompt2:Don't swap screens for the day/night toggle. Keep a single persistent layout and animate only the background color, glow opacity, and text colors when the mode changes. Use CSS transitions on individual properties
Prompt for glass dome animation Create a single GlassDomeScene component.
Inside it:
Render both nightLayer and dayLayer absolutely positioned.
Keep both mounted at all times.
Animate opacity between them.
Never use conditional JSX rendering. Use state only to toggle class names or opacity values. PRompt for tree shadow rotation : Update the tree shadow layers so their rotation animates when theme changes.
Each tree shadow must:
Remain mounted at all times.
Preserve element identity across states.
Animate the transform property instead of replacing the element.
Implement: transform: rotate(Xdeg)
Night state: Shadows angled to match moon direction.
Day state: Shadows angled to match sun direction.
Add CSS transition: transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
Do not re-render or replace the shadow elements. Only animate their transform values. Ensure the tree shadow elements are independent layers with their own transform origin set to center.
Do not bake shadow rotation into static SVG paths. Use CSS transform rotation so it can interpolate smoothly. Thankyou @Figma @Gui Seiz for this oppurtunity
configmakeathonFigma
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started