diff --git a/package.json b/package.json
index 52d0041e5d..f16dab6dce 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "meow": "^5.0.0",
     "patch-package": "^6.5.1",
     "path": "^0.12.7",
-    "postinstall-postinstall": "^2.1.0"
+    "postinstall-postinstall": "^2.1.0",
+    "use-isomorphic-layout-effect": "^1.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
diff --git a/src/components/form-elements/checkbox/Checkbox.spec.tsx b/src/components/form-elements/checkbox/Checkbox.spec.tsx
index 9040b6f35c..24209f2bc3 100644
--- a/src/components/form-elements/checkbox/Checkbox.spec.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Checkbox from './Checkbox';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
@@ -138,7 +138,7 @@ describe('<Checkbox />', () => {
     expect(checkboxInput.checked).toBe(false);
   });
 
-  it('it does not apply animation unless initial state has changed', () => {
+  it('it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const checkbox = renderCheckbox({
       defaultChecked: false,
       children: 'my label',
@@ -150,10 +150,16 @@ describe('<Checkbox />', () => {
 
     expect(checkboxInput.checked).toBe(false);
     expect(iconWithAnimation.length).toBe(0);
-    userEvent.click(checkbox.getByLabelText('my label'));
-    expect(checkboxInput).toEqual(document.activeElement);
+    setTimeout(() => {
+      userEvent.click(checkbox.getByLabelText('my label'));
+    });
+    await waitFor(() => {
+      expect(checkboxInput).toEqual(document.activeElement);
+    });
     expect(checkboxInput.checked).toBe(true);
-    expect(iconWithAnimation.length).toBe(1);
+    await waitFor(() => {
+      expect(iconWithAnimation.length).toBe(1);
+    });
   });
 
   describe('a11y', () => {
diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index 51a122eaf2..e328030e63 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -5,6 +5,7 @@ import {__DEV__, invariant} from '../../utils';
 import Text from '../../text/Text';
 import {CheckIcon, IndeterminateIcon} from './CheckboxIcon';
 import ErrorMessage from '../ErrorMessage';
+import {useFirstPaint} from '../../utils/useFirstPaint';
 
 type CheckboxColorType = 'dark' | 'light';
 type CheckboxLabelSizeType = 'medium' | 'small';
@@ -175,6 +176,7 @@ const Checkbox = ({
   'aria-labelledby': ariaLabelledBy,
   ...props
 }: CheckboxPropsType) => {
+  const checkboxIconRef = React.useRef<HTMLSpanElement>();
   const {current: checkboxId} = React.useRef(
     id === undefined || id === '' ? generateRandomString() : id
   );
@@ -184,7 +186,11 @@ const Checkbox = ({
   );
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconRef = React.useRef<SVGSVGElement | null>(null);
-  const [isPristine, setIsPristine] = React.useState(true);
+  const shouldAnimate = React.useRef(false);
+
+  useFirstPaint(() => {
+    shouldAnimate.current = true;
+  });
 
   React.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
@@ -192,19 +198,28 @@ const Checkbox = ({
   React.useEffect(() => {
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
-      if (isPristine) setIsPristine(false);
+      if (shouldAnimate.current && checkboxIconRef.current) {
+        checkboxIconRef.current.classList.add(
+          'sg-checkbox__icon--with-animation'
+        );
+      }
     }
-  }, [checked, isControlled, isChecked, isPristine]);
+  }, [checked, isControlled, isChecked]);
   const onInputChange = React.useCallback(
     e => {
       if (!isControlled) {
         setIsChecked(val => !val);
-        if (isPristine) setIsPristine(false);
       }
 
       if (onChange) onChange(e);
+
+      if (shouldAnimate.current && checkboxIconRef.current) {
+        checkboxIconRef.current.classList.add(
+          'sg-checkbox__icon--with-animation'
+        );
+      }
     },
-    [onChange, isControlled, isPristine]
+    [onChange, isControlled, checkboxIconRef]
   );
 
   if (__DEV__) {
@@ -230,9 +245,7 @@ const Checkbox = ({
     'sg-checkbox__label--with-padding-bottom': description || errorMessage,
     [`sg-checkbox__label--${String(labelSize)}`]: labelSize,
   });
-  const iconClass = classNames('sg-checkbox__icon', {
-    'sg-checkbox__icon--with-animation': !isPristine, // Apply animation only when checkbox is not pristine
-  });
+  const iconClass = classNames('sg-checkbox__icon');
   const errorTextId = `${checkboxId}-errorText`;
   const descriptionId = `${checkboxId}-description`;
   const describedbyIds = React.useMemo(() => {
@@ -287,6 +300,7 @@ const Checkbox = ({
           <div className="sg-checkbox__icon-wrapper">
             <span
               className={iconClass} // This element is purely decorative so
+              ref={checkboxIconRef}
               // we hide it for screen readers
               aria-hidden="true"
             >
diff --git a/src/components/form-elements/radio/Radio.spec.tsx b/src/components/form-elements/radio/Radio.spec.tsx
index 1d697052de..08a528185d 100644
--- a/src/components/form-elements/radio/Radio.spec.tsx
+++ b/src/components/form-elements/radio/Radio.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Radio from './Radio';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
@@ -104,7 +104,7 @@ describe('<Radio />', () => {
     expect(radioInput.checked).toBe(false);
   });
 
-  it('it does not apply animation unless initial state has changed', () => {
+  it('it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const radio = renderRadio({
       children: 'my label',
     });
@@ -115,8 +115,12 @@ describe('<Radio />', () => {
 
     expect(radioInput.checked).toBe(false);
     expect(iconWithAnimation.length).toBe(0);
-    userEvent.click(radio.getByLabelText('my label'));
-    expect(radioInput).toEqual(document.activeElement);
+    setTimeout(() => {
+      userEvent.click(radio.getByLabelText('my label'));
+    });
+    await waitFor(() => {
+      expect(radioInput).toEqual(document.activeElement);
+    });
     expect(radioInput.checked).toBe(true);
     expect(iconWithAnimation.length).toBe(1);
   });
diff --git a/src/components/form-elements/radio/Radio.stories.mdx b/src/components/form-elements/radio/Radio.stories.mdx
index c888815464..88f60f2fa6 100644
--- a/src/components/form-elements/radio/Radio.stories.mdx
+++ b/src/components/form-elements/radio/Radio.stories.mdx
@@ -7,6 +7,7 @@ import Flex from '../../flex/Flex';
 import Box from '../../box/Box';
 import Headline from '../../text/Headline';
 import Text from '../../text/Text';
+import Button from '../../buttons/Button';
 
 import Radio from './Radio';
 import RadioGroup from './RadioGroup';
@@ -381,6 +382,38 @@ In the following example, className `sg-radio--custom-theme` was applied to all
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story
+    name="toggle without radio group"
+    height="120px"
+    args={{name: 'optionA', value: 'option-a'}}
+  >
+    {args => {
+      const [value, setValue] = React.useState('option-a');
+      return (
+        <div>
+          <div>
+            <Button
+              onClick={() =>
+                setValue(value === 'option-a' ? 'option-b' : 'option-a')
+              }
+              size="s"
+            >
+              click to toggle active radio
+            </Button>
+          </div>
+          <Radio value="option-a" checked={value === 'option-a'}>
+            Option A
+          </Radio>
+          <Radio value="option-b" checked={value === 'option-b'}>
+            Option B
+          </Radio>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Accessibility
 
 <RadioA11y />
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 7a6d054653..e6f32506f2 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import Text from '../../text/Text';
 import generateRandomString from '../../../js/generateRandomString';
 import useRadioContext from './useRadioContext';
+import {useFirstPaint} from '../../utils/useFirstPaint';
 
 export type RadioColorType = 'light' | 'dark';
 type RadioLabelSizeType = 'medium' | 'small';
@@ -160,6 +161,7 @@ const Radio = ({
   'aria-describedby': ariaDescribedBy,
   ...props
 }: RadioPropsType) => {
+  const circleRef = React.useRef<HTMLSpanElement>();
   const {current: radioId} = useRef(
     id === undefined || id === '' ? generateRandomString() : id
   );
@@ -167,12 +169,14 @@ const Radio = ({
   const isWithinRadioGroup = Boolean(
     radioGroupContext && Object.keys(radioGroupContext).length
   );
-  const [isPristine, setIsPristine] = React.useState(true);
-  const shouldAnimate =
-    (isWithinRadioGroup && !radioGroupContext.isPristine) || !isPristine;
+  const shouldAnimateRef = React.useRef(false);
   const isControlled = checked !== undefined || isWithinRadioGroup;
   let isChecked: boolean | undefined = undefined;
 
+  useFirstPaint(() => {
+    shouldAnimateRef.current = true;
+  });
+
   if (isControlled) {
     // Radio can either be directly set as checked, or be controlled by a RadioGroup
     isChecked =
@@ -180,6 +184,10 @@ const Radio = ({
         ? checked
         : Boolean(radioGroupContext.selectedValue) &&
           radioGroupContext.selectedValue === value;
+
+    if (shouldAnimateRef.current && circleRef.current) {
+      circleRef.current.classList.add('sg-radio__circle--with-animation');
+    }
   }
 
   const colorName = radioGroupContext.color || color;
@@ -203,9 +211,7 @@ const Radio = ({
     'sg-radio__label--with-padding-bottom': description,
     [`sg-radio__label--${String(labelSize)}`]: labelSize,
   });
-  const circleClass = classNames('sg-radio__circle', {
-    'sg-radio__circle--with-animation': shouldAnimate,
-  });
+  const circleClass = classNames('sg-radio__circle');
   const labelId = ariaLabelledBy || `${radioId}-label`;
   const isInvalid = invalid !== undefined ? invalid : radioGroupContext.invalid;
 
@@ -213,13 +219,15 @@ const Radio = ({
     if (isWithinRadioGroup) {
       radioGroupContext.setLastFocusedValue(value);
       radioGroupContext.setSelectedValue(e, value);
-    } else {
-      setIsPristine(false);
     }
 
     if (onChange) {
       onChange(e);
     }
+
+    if (circleRef.current && shouldAnimateRef.current) {
+      circleRef.current.classList.add('sg-radio__circle--with-animation');
+    }
   };
 
   return (
@@ -242,6 +250,7 @@ const Radio = ({
             aria-invalid={isInvalid ? true : undefined}
           />
           <span
+            ref={circleRef}
             className={circleClass} // This element is purely decorative so
             // we hide it for screen readers
             aria-hidden="true"
diff --git a/src/components/form-elements/radio/RadioGroup.spec.tsx b/src/components/form-elements/radio/RadioGroup.spec.tsx
index 90e5bc21e1..16ab2fa586 100644
--- a/src/components/form-elements/radio/RadioGroup.spec.tsx
+++ b/src/components/form-elements/radio/RadioGroup.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import RadioGroup from './RadioGroup';
 import Radio from './Radio';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('<RadioGroup />', () => {
@@ -67,7 +67,7 @@ describe('<RadioGroup />', () => {
     expect(onChange).not.toHaveBeenCalled();
     expect(radioGroup.getByLabelText('Option B')).not.toBeChecked();
   });
-  it('checked radio can be changed on controlled radio group', () => {
+  it('checked radio can be changed on controlled radio group', async () => {
     const {container, getByLabelText, rerender} = renderRadioGroup({
       name: 'option',
       value: 'option-a',
@@ -96,11 +96,10 @@ describe('<RadioGroup />', () => {
         </Radio>
       </RadioGroup>
     );
-    expect(iconsWithAnimation.length).toBe(2);
     expect(getByLabelText('Option A')).not.toBeChecked();
     expect(getByLabelText('Option B')).toBeChecked();
   });
-  it('it does not apply animation unless initial state has changed', () => {
+  it('it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const radioGroup = renderRadioGroup({
       name: 'option',
       value: 'option-a',
@@ -110,8 +109,11 @@ describe('<RadioGroup />', () => {
     );
 
     expect(iconsWithAnimation.length).toBe(0);
-    userEvent.click(radioGroup.getByLabelText('Option B'));
-    expect(iconsWithAnimation.length).toBe(2);
+
+    requestAnimationFrame(() => {
+      userEvent.click(radioGroup.getByLabelText('Option B'));
+    });
+    await waitFor(() => expect(iconsWithAnimation.length).toBe(2));
   });
   it('has an accessible name', () => {
     const onChange = jest.fn();
diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
new file mode 100644
index 0000000000..1a29f06075
--- /dev/null
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {useFirstPaint} from './useFirstPaint';
+import './_use-first-paint-example.scss';
+import classNames from 'classnames';
+
+export const Example = () => {
+  const animatedElementRef = React.useRef<HTMLDivElement>();
+  const shouldAnimateRef = React.useRef(false);
+  const [isToggled, setIsToggled] = React.useState(true);
+  const handleClick = React.useCallback(() => {
+    setIsToggled(!isToggled);
+
+    if (shouldAnimateRef.current) {
+      animatedElementRef.current.style.animationDuration = '';
+    }
+  }, [isToggled]);
+
+  React.useLayoutEffect(() => {
+    animatedElementRef.current.style.animationDuration = '0ms';
+  }, []);
+
+  useFirstPaint(() => {
+    shouldAnimateRef.current = true;
+  });
+
+  return (
+    <div>
+      <div style={{height: 300, width: 600}}>
+        <div
+          className={classNames('use-first-paint-example-box', {
+            'use-first-paint-example-box--toggled': isToggled,
+          })}
+          onClick={handleClick}
+          ref={animatedElementRef}
+        >
+          Click me
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/utils/__cache.mdx b/src/components/utils/__cache.mdx
new file mode 100644
index 0000000000..2392f58f7c
--- /dev/null
+++ b/src/components/utils/__cache.mdx
@@ -0,0 +1,32 @@
+<PageHeader type="utility">useFirstPaint</PageHeader>
+
+`useFirstPaint` is a custom hook for detecting when component is before first DOM paint. This is useful for preventing unnecessary animations on initial render.
+
+## Import
+
+```jsx
+import {useFirstPaint} from 'brainly-style-guide';
+```
+
+## Usage
+
+```jsx
+const animatedElementRef = React.useRef();
+const [isToggled, setIsToggled] = React.useState(true);
+const onClick = () => {
+  setIsToggled(!isToggled);
+};
+
+useFirstPaint(() => {
+    if (animatedElementRef) {
+      animatedElementRef.current.classList.add('with-animation')
+    }
+  });
+
+return (
+  <div
+    ref={animatedElementRef}
+    click={onClick}
+  >toggle</>
+);
+```
diff --git a/src/components/utils/_use-first-paint-example.scss b/src/components/utils/_use-first-paint-example.scss
new file mode 100644
index 0000000000..4576598c96
--- /dev/null
+++ b/src/components/utils/_use-first-paint-example.scss
@@ -0,0 +1,38 @@
+.use-first-paint-example-box {
+  animation-duration: 1000ms;
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--blue-40);
+  color: var(--white);
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  animation-fill-mode: both;
+  font-weight: bold;
+  animation-name: useFirstPaintExampleToggleOff;
+
+  &--toggled {
+    animation-name: useFirstPaintExampleToggleOn;
+  }
+}
+
+@keyframes useFirstPaintExampleToggleOn {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(300px);
+  }
+}
+
+@keyframes useFirstPaintExampleToggleOff {
+  0% {
+    transform: translateX(300px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
diff --git a/src/components/utils/useFirstPaint.stories.mdx b/src/components/utils/useFirstPaint.stories.mdx
new file mode 100644
index 0000000000..fa4e873d32
--- /dev/null
+++ b/src/components/utils/useFirstPaint.stories.mdx
@@ -0,0 +1,62 @@
+import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
+import Accordion from '../accordion/Accordion';
+import AccordionItem from '../accordion/AccordionItem';
+import PageHeader from 'blocks/PageHeader';
+import {Example} from './UseFirstpaintExample.tsx';
+
+<Meta title="Hooks/useFirstPaint" />
+
+<PageHeader type="utility">useFirstPaint</PageHeader>
+
+`useFirstPaint` is a custom hook for detecting when first DOM paint of component happened. This is useful for e.g. preventing unnecessary animations on initial render.
+
+## Import
+
+```jsx
+import {useFirstPaint} from 'brainly-style-guide';
+```
+
+## Usage
+
+```jsx
+const animatedElementRef = React.useRef();
+const shouldAnimateRef = React.useRef(false);
+const [isToggled, setIsToggled] = React.useState(true);
+const handleClick = React.useCallback(() => {
+  setIsToggled(!isToggled);
+
+  if (shouldAnimateRef.current) {
+    animatedElementRef.current.style.animationDuration = '';
+  }
+}, [isToggled]);
+
+React.useLayoutEffect(() => {
+  animatedElementRef.current.style.animationDuration = '0ms';
+}, []);
+
+useFirstPaint(() => {
+  shouldAnimateRef.current = true;
+});
+
+return (
+  <div>
+    <div style={{height: 300, width: 600}}>
+      <div
+        className={classNames('use-first-paint-example-box', {
+          'use-first-paint-example-box--toggled': isToggled,
+        })}
+        onClick={handleClick}
+        ref={animatedElementRef}
+      >
+        Click me
+      </div>
+    </div>
+  </div>
+);
+```
+
+`useFirstPaint` is used here to "hide" transition on first render by making its duration 0ms, but when first paint is done we can reset the duration to see full animation.
+
+<Canvas>
+  <Example />
+</Canvas>
diff --git a/src/components/utils/useFirstPaint.ts b/src/components/utils/useFirstPaint.ts
new file mode 100644
index 0000000000..aa11b7f9b9
--- /dev/null
+++ b/src/components/utils/useFirstPaint.ts
@@ -0,0 +1,13 @@
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+
+export const useFirstPaint = (cb: () => void) => {
+  useIsomorphicLayoutEffect(() => {
+    const raf = window.requestAnimationFrame(() => {
+      cb();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+    };
+  }, [cb]);
+};
diff --git a/src/components/utils/useIsFirstRender.ts b/src/components/utils/useIsFirstRender.ts
deleted file mode 100644
index 33fce0b4e2..0000000000
--- a/src/components/utils/useIsFirstRender.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {useRef} from 'react';
-
-const useIsFirstRender = () => {
-  const isFirstRender = useRef(true);
-
-  if (isFirstRender.current === true) {
-    isFirstRender.current = false;
-    return true;
-  }
-
-  return isFirstRender.current;
-};
-
-export default useIsFirstRender;
diff --git a/yarn.lock b/yarn.lock
index 8c338f6c05..d85c8290d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20068,6 +20068,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"