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 {;setPlaying(true);}}return (<div className="video"><videoclassName="video__player"looponClick={onVideoPress}ref={videoRef}src=""></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