Building Snap functionality like in TIK TOK — part 1

I would like to show you how to build the snap functionality at your app.

I would show how to do it with snapping videos like on popular app Tik Toc!

At first, I created an App Component

import React from 'react';
import './App.css';
function App() {

return (
<div className="app">
</div>
);
}

export default App;

After I add a few Video Component to our App Component closing them in div with className=”app__videos”. ( I used here BEM)

import React from 'react';
import Video from "./Video"
import './App.css';
function App() {
return (
<div className="app">
<div className="app__videos">
<Video />
<Video />
<Video />
<Video />
</div>
</div>
);
}

export default App;

Let’s create the Video Component, give the className for the div “video”, and create and import Video.css for it.

import React, { useRef, useState } from 'react';
import './Video.css';
import VideoFooter from './VideoFooter'
const Video = () => {
const [playing, setPlaying] = useState(false)
const videoRef = useRef(null);
const onVideoPress = () => {
if (playing) {
videoRef.current.pause();
setPlaying(false);
} else {
videoRef.current.play();
setPlaying(true);
}
}
return (
<div className="video">
<video
className="video__player"
loop
onClick={onVideoPress}
ref={videoRef}
src="https://v19-web.tiktokcdn.com/b804d2b5adbbaeb1461567af91d5cd66/5f667716/video/tos/useast2a/tos-useast2a-ve-0068c002/721b97b3b943478b914e20d0b3a9b056/?a=1988&br=2822&bt=1411&cr=0&cs=0&cv=1&dr=0&ds=3&er=&l=202009191524270101902192185F079296&lr=tiktok_m&mime_type=video_mp4&qs=0&rc=M3A1a2kzZXA8djMzNjczM0ApZTg5NDU5ZWRlNzg5ZTs8OGdoZXIwcWVlc2JfLS01MTZzcy4vMWMxNjRgYjIwMzJhNjA6Yw%3D%3D&vl=&vr="
></video>
<VideoFooter />
{/* <VideoFooter /> */}
{/* <VideoSidebar /> */}
</div>
)
}
export default Video

Now we can jump into that file

All magic is happening on the CSS file of the app. I used to React for it but it could by any other framework! — you can find it here at part 2