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"><videoclassName="video__player"looponClick={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