Difference between playwright `toBeVisible` and `toBeInViewport`

Using toBeVisible:

const locator = page.locator('.my-element');
await expect(locator).toBeVisible();

Using toBeInViewport:

const locator = page.locator('.my-element');
await expect(locator).toBeInViewport();

What is the difference here? both of them are testing if the element is visible to user.

If both of them are different, then what is the use case for each of them?