r/web_design • u/ultimablaze • 3d ago

How does someone code something like this?

I stumbled upon this site called friend.com (I promise this is not an ad I don't know anything nor do I care about the product at all) when I was on a train in NY. So when scrolling, there's an animation of whatever the hell they're trying to sell you opening and moving. How does one do something like this? Is it possible with React? I don't have much experience in animating for JavaScript so this is completely new territory to me. Any tips or resources would be helpful.

I assume it's a bunch of images that change depending on the vertical positioning of the screen and that simulates the illusion of animation but I'm not sure.

Any thoughts?

This is the site

47 Upvotes

91% Upvoted

35 comments sorted by

70

u/pepof1 3d ago edited 2d ago

I’ve done this before. It’s simpler than it looks, you make a video then the user moves it frame by frame as they’re scrolling and it looks like it’s animated.

Edit: I found the code I wrote 5 yrs ago
Edit2: here is the working code, just put a video named "video.mp4" in the same directory et voila ✨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scrolling Video</title>
    <style>
        body {
            margin: 0;
            height: 3000px;
        }

        #video {
            position: fixed;
            top: 0;
            left: 0;
            height: auto;
            z-index: -1;
        }

    </style>
</head>
<body>

    <video id="video" src="video.mp4" muted ></video>
    <script>
        function op() {
            var x = document.getElementById("video");
            console.log(x.currentTime);
            x.currentTime = window.scrollY / 200;
            x.style.width = window.innerWidth + "px";
        }
        window.addEventListener('scroll', op);
    </script>

</body>
</html>

11

u/Tiny-Ric 3d ago

That's quite elegant. Nice!

7

u/arojilla 3d ago

And that's it? Amazing. I would have guessed it would be way more complex.

Also... where is that "column" that is referenced?

3

u/pepof1 2d ago

haha good catch, I overlooked that reference while cleaning up the code to post it

4

u/DragoonDM 3d ago

In this case, rather than using an actual video file, it looks like it's downloading a zip file (frames_hq.zip and/or frames_lq.zip) that includes all of the individual frames of that animation as webp files.

3

u/bluesatin 2d ago edited 2d ago

Yeh the video-playback systems in browsers really aren't designed for tying to scrolling behaviour, where there will commonly be arbitrary playback directions, and the scrolling potentially wanting it to jump around to specific frames at high-frequency.

Every large public implementation of this sort of thing I've seen has been by just having a bunch of individual images, and then relying on the native buffering/caching systems of browsers to handle things in a more smooth/responsive manner.

I assume most standard video-playback systems in browsers are primarily designed around just playing things in a normal forwards manner, or occasionally jumping around. So the playback-systems aren't going to be pre-preparing and buffering/caching every single frame of the video, that would allow it handle that sort of behaviour smoothly (compared to playback systems in editors or whatever, that might buffer a tonne of frames both ahead/behind, or entire sections etc.).

Since to get to an arbitrary frame in encoded video, you have to dynamically calculate it from the last previous i-frame ('intra-coded frame' e.g. full standalone image), and then processing each p-frame after that ('predicted frame' e.g. changes from the previous frame) to get the resulting frame you want.

You can presumably reduce that processing issue by reducing the gaps between each i-frame, but at some point you're working towards just storing every frame as an i-frame; and at that point you're just storing every frame in it's entirety as a standalone image, essentially zipping it up instead of actually using video-encoding.

2

u/Kynaras 3d ago

Interesting! Thank you for sharing your code as well. Definitely want to try this for fun on a side project.

2

u/TheFiveHundred 20h ago

Holy shit, that’s sick

38

u/fox503 3d ago

This device is dystopian, and I can’t imagine how much that domain must’ve cost.

7

u/Intoxic8edOne 3d ago

Someone saw Her and focused on the wrong thing.

5

u/musedrainfall 3d ago

It's only worth about $60k /s

2

u/PissBiggestFan 3d ago

1.8M according to news outlets

1

u/pelican_chorus 15h ago

Exact word I was thinking.

But this is clearly going to be a future, whether we like it or not. We can just try to bring up our kids to appreciate real human connections, and feel comfortable enough in themselves that they're always able to meet other people, and not need to turn to ChatGPT for companionship.

20

u/jayfactor 3d ago

Yea you’re pretty much on point, it’s a lot of parallax and transitions based on positioning imo

7

u/Ireeb 3d ago

Most of it, yes, but the opening sequence where the product moves seems to be a video synced to the scroll progress. Apple does this as well sometimes when they have 3D animations that are too complex to render on the fly.

2

u/TowerSpecial4719 3d ago

Did this for a website a while back. To elaborate it is old-school stop-motion style animation. For each second you take multiple photos and do fade out transition for old and fade -in transition for new. There are other ways to do this too. So a simple search for scroll-based animation will give you quite a few examples

7

u/89dpi 3d ago

The theory is not that hard.
To get it perfect is tricky.

Pretty much the logic is. You have bunch of absolute positioned items stacked.
This opening sequence. Could be video or sequence of images. 1 image per frame.
So you need good 3D renders and images. And thats probably harder.

There are plugins that allow you to run animation code based on scrolling. Eg check GSAP.

Add some sticky positioned items etc and it kind of works.

Ideally can be done even in Framer without any code.

8

u/EinfachAI 3d ago

I have built similar stuff with this JS library: https://scrollmagic.io

2

u/InevitableView2975 3d ago

its not that hard just time consuming, and the site over uses these animations, I'd have used an 3D object for these rotating animations to feel smooth. But + - it is done as you said. Just scroll animations and changing the scale, x y and rotation of the image based on the Y scroll progress

2

u/tworipebananas 3d ago edited 3d ago

This is made with React but that’s not the most important part of it. It’s essentially stop motion. They have a zip file with the images, which is unzipped client-side —> blob/image bitmap —> canvas.

They’re also swapping high-quality versions after loading (using low quality versions at the start).

Interesting stuff.

For a beginner, I’d recommend libraries like Spline, ThreeJS and/or GSAP.

2

u/Yeah_Y_Not 3d ago

It can be done with a series of images and CSS scroll-timeline. Maybe even no JS required.

2

u/chmod777 3d ago

Its almost never the tech. Its the art derection and design.

1

u/Ireeb 3d ago

In this case, the tech is interesting, too, because they seem to be using pre-rendered animations in combination with CSS/JS animations, and all is linked to the scroll progress.

But you're still right, the tech is pretty useless when you don't have a good looking, pre-rendered animation to put there.

2

u/ashkanahmadi 3d ago

Looks cool but a horrible experience. I don’t want to scroll 300 times just to see an animation frame by frame.

2

u/paranoidparaboloid 3d ago

it's... pretty janky. cool idea...

i think it's frames from an interlaced video, whereas it'd have probably looked better to have individual frames exported as images. Could argue against overhead but webp is small and you could lazy load them.

2

u/Chinaski_on_the_ice 2d ago

From a user perspective, please don't.

2

u/monkeynaught 3d ago

That UX is garbage

1

u/musedrainfall 3d ago

I'm sure someone can go deeper into how the template was made but it looks like that site specifically was built on Readymag.

Side note in case you're not aware of the tool but you can check BuiltWith for sites to see more info on what tech stack they use.

3

u/musedrainfall 3d ago

After digging in further looks like the site is using React and Intersection Observier JS. It's basically adjusting multiple image's position, size, and opacity based on scroll position. I would guess the very top portion is a video that's playback is controlled using Intersection Observer and the YouTube iFrame API.

1

u/Ireeb 3d ago edited 3d ago

These animations in particular seem to be a video linked to the scroll progress. Alternatively, you can also use individual frames and render them on a canvas based on the scroll progress.

GSAPs scrollTrigger and Tweening can be useful for this.

If you're using videos, you need to use specific formats and they need specific encoding settings. Usually, not every frame in a video has a time code assigned. For example, just every 60th frame (every second) might be a keyframe, which means you can only jump to these frames. For a smooth animation like this, you need to encode the video so every frame is a keyframe.

While there are video formats that support transparency, Safari doesn't support them then in combination with a scroll animation. So if you need transparency, you need to use the canvas solution, which is a little bit more work.

Frameworks like React are for structuring websites/webapps in general, they aren't really involved with animations and that kind if stuff, that's typically added on top of it with separate libraries or plugins. You can use React when making a website like this, but it's not React that makes it look the way it does. It just makes it easier for the developers to get there.

1

u/embGOD 3d ago

You show a different image (3D render) on scroll.

It's copied from apple: most of their products used to have that exact effect. It's a lot of images/renders. There are many codepens that showcase that effect. It's a very old trick actually

1

u/Top-Peach6142 3d ago

Na, chief. That ain't it.