# Steve Jobs Archive Website **URL:** \ **Category:** programming\ **Created:** [March 20, 2023, 3:56pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663 "2023-03-20T15:56:58Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\ **Post date:** [March 20, 2023, 3:56pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/1 "2023-03-20T15:56:58Z")
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/](https://stevejobsarchive.com/) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 20, 2023, 4:37pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/2 "2023-03-20T16:37:27Z")
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 πŸ™‚ ---
**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\ **Post date:** [March 20, 2023, 6:30pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/3 "2023-03-20T18:30:29Z")
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](https://dev.to/javascriptacademy/create-parallax-scrolling-effect-with-vanilla-javascript-5b4h) ---
**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\ **Post date:** [March 20, 2023, 7:55pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/4 "2023-03-20T19:55:37Z")
I guess its a combination of parallax and css animations ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 20, 2023, 7:59pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/5 "2023-03-20T19:59:27Z")
What parallax in particular? Maybe I am missing something πŸ˜€ If you can attach a screen capture, that would help! ---
**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\ **Post date:** [March 20, 2023, 8:05pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/6 "2023-03-20T20:05:11Z")
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 ---
**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\ **Post date:** [March 21, 2023, 9:22pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/7 "2023-03-21T21:22:39Z")
Ah it is using position: Sticky to replicate a nice effect. This site is so beautiful yet simple. What an elegant design ---
**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\ **Post date:** [April 3, 2023, 7:49pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/8 "2023-04-03T19:49:09Z")
@kirupa how can you create so smooth transitions here [https://mikematas.com/](https://mikematas.com/) He designed the Steve jobs archive site mentioned above. This might be what he is using [Documentation | Framer for Developers](https://www.framer.com/motion/) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 3, 2023, 8:30pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/9 "2023-04-03T20:30:56Z")
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! ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/4/641f8b8b9506d169b66411a7eb6f8a9478c0a054.jpeg) ---
**Author:** ![Skinly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/skinly/32/21447_2.png) [@Skinly](https://forum.kirupa.com/u/Skinly)\ **Post date:** [April 4, 2023, 4:55pm UTC](https://forum.kirupa.com/t/steve-jobs-archive-website/657663/10 "2023-04-04T16:55:56Z")
The Steve Jobs Archive is giving out a free ebook.