Steve Jobs Archive Website

Hi,

I was wondering, how does the scrolling and transitioning to viewing single pages and back work here? It is so simple yet elegant. https://stevejobsarchive.com/

At first glance, it is just a clever use of CSS animations. When you click on a topic to learn more, the “modal” fades in where the opacity animates from 0 to 1 :slight_smile:

1 Like

What about the scroll parrallex effect from the top to the articles. Perhaps something like this with css animations Create parallax scrolling effect with vanilla Javascript - DEV Community

I guess its a combination of parallax and css animations

What parallax in particular? Maybe I am missing something :grinning:

If you can attach a screen capture, that would help!

When you scroll down at first, the icon text fades out and the first email cover scrolls up in a nice way until you can see the content below it

Ah it is using position: Sticky to replicate a nice effect. This site is so beautiful yet simple. What an elegant design

2 Likes

@kirupa how can you create so smooth transitions here https://mikematas.com/
He designed the Steve jobs archive site mentioned above. This might be what he is using Documentation | Framer for Developers

A tool like Framer or Webflow can simplify a lot of this! In looking at the source code and inspecting in the dev tools, it is just a clever use of transforms to bring content into view and to shift content outside of view!

1 Like

The Steve Jobs Archive is giving out a free ebook.

1 Like