Animated Fullscreen and grid view Slider

By | July 8, 2020

Animated Fullscreen Slider developed using HTML, JavaScript, and CSS. This is a fullscreen slider that has next, previous, and grid view buttons. Grid view provides the sliders between the cards and with dark mode options.

See the Pen Animated Slider by Kasper De Bruyne (@kdbkapsere) on CodePen.

Pen by Kasper De Bruyne on CodePen. Created on March 3, 2020 Updated on March 5, 2020.

<div id="app"></div>
function _defineProperty(obj, key, value) {
	if (key in obj) {
		Object.defineProperty(obj, key, {
			value: value,
			enumerable: true,
			configurable: true,
			writable: true
		});
	} else {
		obj[key] = value;
	}
	return obj;
}
const {
	useRef, useState, useEffect, style, Fragment, forwardRef, Component, createRef
} = React;
const onloadAnimation = controls => {
	const tl = gsap.timeline();
	tl.fromTo(".slide-number-container", {
		x: "3%"
	}, {
		opacity: 1,
		x: 0,
		duration: 0.32
	}, "in+=0.56").
	fromTo(".slide-title", {
		y: "200%"
	}, {
		y: 0,
		duration: 0.64
	}, "in").
	to(".slide-info-container", {
		opacity: 1
	}, "in+=0.64")
	// info box
	.to(".slide-info-box", {
		"clip-path": "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)"
	}, "in+=0.64").
	to(".slide-info-box a", {
		opacity: 1
	}, "in+=0.82").
	to(".slide-info-box h4", {
		opacity: 1
	}, "in+=0.82")
	// controls -
	.to(controls, {
		opacity: 1,
		duration: 0.32
	}, "in+=0.64");
};
// ANIMATE SLIDE
const animateSlide = (titleWrap, numberWrap, setSlidingState, wrapTransform) => {
	const tl = gsap.timeline();
	// hide title clip
	tl.to(".slide-title", {
		"clip-path": "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)",
		duration: 0.32
	}, "in").
	to(titleWrap, {
		y: wrapTransform,
		duration: 0.44,
		ease: "power2"
	}, "in+=0.32")
	// animate the number container
	.to(numberWrap, {
		y: wrapTransform,
		duration: 0.4,
		ease: "power2"
	}, "in+=0.32")
	// animate the number
	.to(".slide-number", {
		opacity: 0,
		duration: 0.32
	}, "in")
	// reset the number animation
	.set(".slide-number", {
		opacity: 1
	}, "in+=0.32")
	// show title clip
	.to(".slide-title", {
		"clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)",
		duration: 0.64
	})
	// animate slide info text container
	.to(".slide-info", {
		y: wrapTransform,
		duration: 0.32,
		ease: "power2"
	}, "in+=0.32")
	// animate info text
	.to(".slide-info", {
		opacity: 0,
		duration: 0.32
	}, "in").
	to(".slide-info", {
		opacity: 1,
		duration: 0.32
	}, "in+=0.32").
	add(setSlidingState, 1.1);
};
// ANIMATE SLIDER WHEN EXPAND BUTTON IS CLICKED
const animateSliderOut = () => {
	const tl = gsap.timeline({
		onComplete: () => {}
	});
	tl.to(".slide-title", {
		"clip-path": "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)",
		duration: 0.4
	}, "out").
	to(".slide-number", {
		y: "+=100%"
	}, "out").
	fromTo(".slide-number", {
		"clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)"
	}, {
		"clip-path": "polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%)",
		duration: 0.08
	}, "out").
	to(".slide-info-box", {
		opacity: 0
	}, "out");
};
// ANIMATE OVERLAY WHEN EXPAND BUTTON IS CLICKED
const animateOverlayIn = (overlay, navbar, setExpandingState) => {
	const tl = gsap.timeline({
		delay: 0.4,
		onComplete: () => {}
	});
	tl
	// navbar
	.to(navbar, {
		y: "-100%"
	}, "in")
	// overlay
	.to(overlay, {
		autoAlpha: 1
	}, "in+=0.08").
	fromTo(".overlay-nav-heading", {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"
	}, {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
		duration: 0.48,
		ease: "power1.inOut"
	}, "in").
	fromTo(".overlay-nav-buttons", {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"
	}, {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
		duration: 0.48,
		ease: "power1.inOut"
	}, "in")
	// slides
	.fromTo(".overlay-slide-preview", {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"
	}, {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
		stagger: 0.32,
		duration: 0.8,
		ease: "expo.inOut"
	}, "in+=0.1").
	fromTo(".overlay-preview-title-text", {
		"clip-path": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
	}, {
		"clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
		stagger: 0.32,
		duration: 0.56,
		ease: "sine"
	}, "in+=0.48").
	fromTo(".overlay-preview-title-number", {
		opacity: 0
	}, {
		opacity: 1,
		stagger: 0.32,
		duration: 0.48
	}, "in+=0.48").
	add(setExpandingState, 1);
};
// ANIMATE THE OVERLAY WHEN CLOSE BUTTON IS CLICKED
const animateOverlayOut = (overlay, navbar, callback) => {
	const tl = gsap.timeline({
		onComplete: () => {
			gsap.set(overlay, {
				visibility: "hidden"
			});
		}
	});
	tl.to(".slide-title", {
		"clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)",
		duration: 0.64
	}, "in+=0.32").
	to(".slide-info-box", {
		opacity: 1
	}, "in+=0.32").
	to(".slide-number", {
		"clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)",
		y: "-=100%"
	}, "in+=0.32").
	to(overlay, {
		opacity: 0
	}, "in").
	to(navbar, {
		y: 0,
		duration: 0.64
	}, "in").
	add(callback, 0.96);
};
// ANIMATE THE OVERLAY AND THE SLIDER WHEN OVERLAY IMAGE IS CLICKED
const animateImg = (overlay, callback, navbar) => {
	const tl = gsap.timeline({
		defaults: {
			duration: 0.4
		},
		onComplete: () => {
			gsap.set(".overlay-preview-wrap", {
				clearProps: "width,x,padding"
			});
			gsap.set(".overlay-slide-preview", {
				clearProps: "margin,width,height"
			});
			gsap.set(".overlay-slide-container", {
				clearProps: "padding-left,height,overflow,width"
			});
			gsap.set(".overlay-slide-container", {
				clearProps: "height,overflow,width"
			});
			gsap.set(".overlay-preview-title-text", {
				clearProps: "clip-path,y"
			});
			gsap.set(".overlay-preview-title-number", {
				clearProps: "opacity"
			});
		}
	});
	tl
	// Overlay components
	.set(".overlay-slide-container", {
		width: "100%"
	}, "animate").
	to(".overlay-slide-container", {
		height: "100%",
		overflow: "hidden",
		width: "100%"
	}, "animate").
	to(".overlay-slide-preview", {
		margin: "0",
		width: "100vw",
		height: "100vh"
	}, "animate")
	// hide overlay image text
	.to(".overlay-preview-title-text", {
		"clip-path": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
		duration: 0.24
	}, "animate").
	to(".overlay-preview-title-number", {
		opacity: 0,
		duration: 0.24
	}, "animate").
	to(overlay, {
		opacity: 0,
		onComplete: () => {
			gsap.set(overlay, {
				visibility: "hidden"
			});
		}
	}, "animate+=0.32").
	add(callback, 0.72)
	// Animating the slider components
	.fromTo(".slide-title", {
		"clip-path": "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)"
	}, {
		"clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)",
		duration: 0.64
	}, 0.48).
	fromTo(".slide-number", {
		"clip-path": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
	}, {
		"clip-path": "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
		y: "-=100%"
	}, 0.48)
	// show slider info box
	.to(".slide-info-box", {
		opacity: 1
	}, 0.48)
	// animating the navbar
	.to(navbar, {
		y: 0
	}, 0.4);
};
const animatePreview = (x, slideCount, numberTransform) => {
	const tl = gsap.timeline({
		defaults: {
			duration: 0.4
		}
	});
	tl
	// overlay
	.to(".overlay-preview-wrap", {
		"padding-left": "0px",
		x: x,
		width: "400%"
	})
	// slider
	.set(".slider-container", {
		background: `url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/${slideCount}.jpg') center center / cover`
	}).
	set(".number-wrap", {
		y: numberTransform
	}).
	set(".title-wrap", {
		y: numberTransform
	}).
	set(".slide-info", {
		y: numberTransform
	});
};
const SlidePreview = forwardRef((props, ref) => {
	return (React.createElement("div", {
		className: "overlay-slide-preview",
		style: props.styles,
		onClick: props.click,
		ref: ref,
		id: props.id
	}, React.createElement("h4", {
		className: "overlay-preview-title"
	}, React.createElement("span", {
		className: "overlay-preview-title-number"
	}, props.number), React.createElement("span", {
		className: "overlay-preview-title-text"
	}, props.category))));
});
const Toggle = () => {
	const getTheme = string => {
		return window.localStorage.getItem("theme") === string;
	};
	const setTheme = () => {
		if (getTheme("dark")) {
			gsap.set(":root", {
				"--bg-color": "#211f1f",
				"--text-color-alt": "#FFF",
				duration: 0.32
			});
			// set toggle position depending on theme state
			gsap.set(".theme-toggle span", {
				x: 12
			});
		} else {
			window.localStorage.setItem("theme", "light");
		}
	};
	const toggleTheme = () => {
		if (getTheme("") || getTheme("light")) {
			gsap.to(":root", {
				"--bg-color": "#211f1f",
				"--text-color-alt": "#FFF",
				duration: 0.32
			});
			gsap.to(".theme-toggle span", {
				x: 12,
				duration: 0.24
			});
			window.localStorage.setItem("theme", "dark");
		} else {
			gsap.to(":root", {
				"--bg-color": "#FFF",
				"--text-color-alt": "#000",
				"--grey": "#808080"
			});
			gsap.to(".theme-toggle span", {
				x: 0,
				duration: 0.24
			});
			window.localStorage.setItem("theme", "light");
		}
	};
	useEffect(() => {
		getTheme();
		setTheme();
	});
	return (React.createElement("button", {
		role: "switch",
		"aria-checked": "true",
		className: "theme-toggle",
		onClick: toggleTheme
	}, React.createElement("span", null)));
};
const Overlay = forwardRef((props, ref) => {
	const [images] = useState([{
		id: "1",
		category: "Nature.",
		number: "01."
	}, {
		id: "2",
		category: "Office.",
		number: "02."
	}, {
		id: "3",
		category: "Extension.",
		number: "03."
	}, {
		id: "4",
		category: "Custom.",
		number: "04."
	}]);
	const slideRef = useRef([]);
	useEffect(() => {
		// Enable dragging
		new Draggable(".overlay-preview-wrap", {
			type: "x",
			bounds: ".overlay-slide-container",
			dragResistance: 0.55,
			inertia: true,
			throwResistance: 3500,
			onDrag: () => {
				gsap.set(".overlay-slide-preview", {
					cursor: "grab"
				});
			},
			onDragEnd: () => {
				gsap.set(".overlay-slide-preview", {
					cursor: "pointer"
				});
			}
		});
	}, []);
	const slides = images.map(item => {
		return (React.createElement(SlidePreview, {
			key: item.id,
			styles: {
				background: `url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/${item.id}.jpg) center center / cover`
			},
			id: `preview-${item.id}`,
			click: props.imgClick,
			number: item.number,
			category: item.category,
			ref: slide => slideRef.current[item] = slide
		}));
	});
	return (React.createElement(Fragment, null, React.createElement("div", {
		ref: ref,
		className: "overlay"
	}, React.createElement("div", {
		className: "overlay-bg"
	}), React.createElement("div", {
		className: "overlay-navigation"
	}, React.createElement("div", {
		className: "overlay-nav-heading"
	}, React.createElement("h3", {
		className: "overlay-title"
	}, "Select your purpose"), React.createElement("h4", {
		className: "overlay-sub"
	}, "You can drag and click to select")), React.createElement("nav", {
		className: "overlay-nav-buttons"
	}, React.createElement(Toggle, null), React.createElement("button", {
		className: "overlay-close",
		onClick: props.close
	}, "Close"))), React.createElement("div", {
		className: "overlay-slide-container"
	}, React.createElement("div", {
		className: "overlay-preview-wrap"
	}, slides)))));
});
const Preloader = forwardRef((props, ref) => {
	const boxRef = useRef();
	const box2Ref = useRef();
	const textRef = useRef();
	useEffect(() => {
		const tl = gsap.timeline({
			repeat: -1,
			repeatDelay: 0.2
		});
		tl.to(textRef.current, {
			opacity: 0,
			duration: 0.4
		}, "o").
		to(boxRef.current, {
			"clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
			duration: 0.4
		}, "o").
		to(boxRef.current, {
			"clip-path": "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
			duration: 0.4
		}).
		to(textRef.current, {
			opacity: 1,
			duration: 0.4
		}, "n").
		to(box2Ref.current, {
			"clip-path": "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)",
			duration: 0.4
		}, "n").
		to(box2Ref.current, {
			"clip-path": "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
			duration: 0.4
		}, "m");
	}, []);
	return (React.createElement("div", {
		className: "preloader",
		ref: ref
	}, React.createElement("div", {
		className: "box"
	}, React.createElement("p", {
		ref: textRef
	}, "Loading..."), React.createElement("div", {
		className: "box-clip",
		ref: boxRef
	}), React.createElement("div", {
		className: "box-clip2",
		ref: box2Ref
	}))));
});
const Navbar = forwardRef((props, ref) => {
	useEffect(() => {
		let theme = window.localStorage.getItem("theme");
		if (theme === "light") {
			ref.current.dataset.theme = 'light';
		}
		if (theme === "dark") {
			ref.current.dataset.theme = "dark";
		}
	});
	const toggleNav = () => {
		ref.current.dataset.expanded === "false" ? ref.current.dataset.expanded = 'true' : ref.current.dataset.expanded = 'false';
		ref.current.dataset.expanded === "true" ? gsap.fromTo(ref.current, {
			height: "40px"
		}, {
			height: "100%",
			duration: 0.40
		}) : gsap.to(ref.current, {
			height: "40px",
			duration: 0.40
		});
	};
	return (React.createElement("header", null, React.createElement("nav", {
		className: "navbar",
		ref: ref,
		"data-test": "component-navbar",
		"data-theme": "light",
		"data-expanded": "false"
	}, React.createElement("button", {
		className: "navbar-toggle",
		type: "button",
		"aria-expanded": "false",
		"aria-label": "Toggle navigation",
		onClick: toggleNav
	}, React.createElement("span", {
		className: "toggle-bar"
	}), React.createElement("span", {
		className: "toggle-bar"
	}), React.createElement("span", {
		className: "toggle-bar"
	})), React.createElement("div", {
		className: "brand"
	}, React.createElement("a", {
		href: "/"
	}, "ARK-SHELTER")), React.createElement("div", {
		className: "nav-center"
	}, React.createElement("ul", null, React.createElement("li", null, React.createElement("a", {
		className: "nav-item",
		href: "#"
	}, "Home")), React.createElement("li", null, React.createElement("a", {
		className: "nav-item",
		href: "#"
	}, "Nature")), React.createElement("li", null, React.createElement("a", {
		className: "nav-item",
		href: "#"
	}, "Offices")), React.createElement("li", null, React.createElement("a", {
		className: "nav-item",
		href: "#"
	}, "Extension")), React.createElement("li", null, React.createElement("a", {
		className: "nav-item",
		href: "#"
	}, "Custom")), React.createElement("li", null, React.createElement("a", {
		className: "nav-item",
		href: "#"
	}, "About")))), React.createElement("div", {
		className: "nav-right"
	}, React.createElement("a", {
		className: "nav-item",
		href: "/#"
	}, "Contact")))));
});
const SliderControls = forwardRef((props, ref) => {
	return (React.createElement("div", {
		className: "slider-controls",
		ref: ref
	}, React.createElement("button", {
		className: "slide-prev-btn",
		onClick: props.prev
	}), React.createElement("button", {
		className: "slide-next-btn",
		onClick: props.next
	}), React.createElement("button", {
		onClick: props.expand,
		className: "slide-overlay-btn"
	})));
});
class App extends Component {
	constructor(...args) {
		super(...args);
		_defineProperty(this, "state", {
			slides: [{
				id: "1",
				title: "Back to nature.",
				slideNumber: "01",
				text: "Discover nature.",
				image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/1.jpg"
			}, {
				id: "2",
				title: "Chill in the office.",
				slideNumber: "02",
				text: "Step into your office.",
				image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/2.jpg"
			}, {
				id: "3",
				title: "From dreams to reality.",
				slideNumber: "03",
				text: "Go big or go home.",
				image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/3.jpg"
			}, {
				id: "4",
				title: "Make a wish.",
				slideNumber: "04",
				text: "Push it to the limit.",
				image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/4.jpg"
			}],
			isExpanded: false,
			slideCount: 1,
			isSliding: false,
			isExpanding: false,
			isShrinking: false,
			imgsLoaded: 0,
			isLoaded: false
		});
		_defineProperty(this, "titleWrapRef", createRef());
		_defineProperty(this, "numberWrapRef", createRef());
		_defineProperty(this, "navbar", createRef());
		_defineProperty(this, "overlay", createRef());
		_defineProperty(this, "sliderContainer", createRef());
		_defineProperty(this, "controlsRef", createRef());
		_defineProperty(this, "preloaderRef", createRef());
		_defineProperty(this, "imageRef", createRef());
		_defineProperty(this, "loadImages", () => {
			this.setState(prevState => ({
				imgsLoaded: prevState.imgsLoaded + 1
			}));
			if (this.state.imgsLoaded === 3) {
				gsap.to(this.preloaderRef.current, {
					y: "-100%",
					duration: 1,
					onStart: () => {
						// Animate the different elements in
						onloadAnimation(this.controlsRef.current);
					},
					onComplete: () => {
						gsap.set(this.preloaderRef.current, {
							display: "none"
						});
						this.setState({
							isLoaded: true
						});
					}
				});
			}
		});
		_defineProperty(this, "expand", () => {
			// Expand Overlay
			if (!this.state.isExpanded && !this.state.isExpanding && !this.state.isSliding) {
				this.setState({
					isExpanding: !this.state.isExpanding
				}, () => {
					animateSliderOut();
					animateOverlayIn(this.overlay.current, this.navbar.current, () => {
						this.setState({
							isExpanding: false,
							isExpanded: true
						});
					});
				});
			}
			// Hide Overlay
			if (this.state.isExpanded && !this.state.isExpanding && !this.state.isSliding) {
				this.setState({
					isExpanding: !this.state.isExpanding
				}, () => {
					animateOverlayOut(this.overlay.current, this.navbar.current, () => {
						this.setState({
							isExpanding: false,
							isExpanded: false
						});
					});
				});
			}
		});
		_defineProperty(this, "prevSlide", () => {
			if (this.state.slideCount >= 2 && !this.state.isSliding) {
				this.setState(prevState => ({
					slideCount: prevState.slideCount - 1,
					isSliding: true
				}), () => {
					gsap.set(this.sliderContainer.current, {
						background: `url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/${this.state.slideCount}.jpg) center center / cover`
					});
					animateSlide(this.titleWrapRef.current, this.numberWrapRef.current, () => this.setState({
						isSliding: false
					}), "+=100%");
				});
			}
		});
		_defineProperty(this, "nextSlide", () => {
			if (this.state.slideCount <= 3 && !this.state.isSliding) {
				this.setState(prevState => ({
					slideCount: prevState.slideCount + 1,
					isSliding: true
				}), () => {
					gsap.set(this.sliderContainer.current, {
						background: `url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/${this.state.slideCount}.jpg) center center / cover`
					});
					animateSlide(this.titleWrapRef.current, this.numberWrapRef.current, () => this.setState({
						isSliding: false
					}), "-=100%");
				});
			}
		});
		_defineProperty(this, "animateImgClick", e => {
			if (!this.state.isShrinking) {
				this.setState({
					isShrinking: true
				}, () => animateImg(this.overlay.current, () => this.setState({
					isExpanded: !this.state.isExpanded,
					isShrinking: false
				}), this.navbar.current));
				// Updating the sliders position based on what image was clicked in the overlay
				if (e.currentTarget.id === "preview-1") {
					this.setState({
						slideCount: 1
					}, () => animatePreview(0, 1, "0%"));
				}
				if (e.currentTarget.id === "preview-2") {
					this.setState({
						slideCount: 2
					}, () => animatePreview("-25%", 2, "-100%"));
				}
				if (e.currentTarget.id === "preview-3") {
					this.setState({
						slideCount: 3
					}, () => animatePreview("-50%", 3, "-200%"));
				}
				if (e.currentTarget.id === "preview-4") {
					this.setState({
						slideCount: 4
					}, () => animatePreview("-75%", 4, "-300%"));
				}
			}
		});
	}
	render() {
		const slideNumbers = this.state.slides.map(item => {
			return (React.createElement("span", {
				className: "slide-number",
				key: item.id
			}, item.slideNumber));
		});
		const slideTitles = this.state.slides.map(item => {
			return (React.createElement("h1", {
				className: "slide-title",
				key: item.id
			}, item.title));
		});
		const slideText = this.state.slides.map(item => {
			return (React.createElement("h3", {
				className: "slide-info",
				key: item.id
			}, item.text));
		});
		const images = this.state.slides.map(item => {
			return (React.createElement("img", {
				className: "img-hidden",
				src: item.image,
				key: item.id,
				ref: img => this.imageRef = img,
				onLoad: this.loadImages,
				alt: ""
			}));
		});
		return (React.createElement("div", {
			className: "App"
		}, !this.state.isLoaded ? React.createElement(Preloader, {
			ref: this.preloaderRef
		}) : null, React.createElement(Navbar, {
			ref: this.navbar
		}), images, React.createElement("div", {
			className: "slider-container",
			ref: this.sliderContainer,
			style: {
				background: `url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/${this.state.slideCount}.jpg) center center / cover`
			}
		}, React.createElement("div", {
			className: "slider-text-container"
		}, React.createElement("div", {
			className: "slide-number-container"
		}, React.createElement("div", {
			className: "number-wrap",
			ref: this.numberWrapRef
		}, slideNumbers), React.createElement("span", {
			className: "slide-number-small"
		}, "/ 04")), React.createElement("div", {
			className: "slide-title-container"
		}, React.createElement("div", {
			className: "title-wrap",
			ref: this.titleWrapRef
		}, slideTitles)), React.createElement(SliderControls, {
			prev: this.prevSlide,
			next: this.nextSlide,
			expand: this.expand,
			ref: this.controlsRef
		})), React.createElement("div", {
			className: "slide-info-container"
		}, React.createElement("div", {
			className: "slide-info-text"
		}, React.createElement("div", {
			className: "slide-info-wrap"
		}, slideText), React.createElement("h4", null, "Scroll for more"))), React.createElement("div", {
			className: "slide-info-box"
		}, React.createElement("a", {
			href: "/#"
		}, "Need more info & prices?"), React.createElement("h4", null, "Download our brochure now"))), React.createElement(Overlay, {
			close: this.expand,
			ref: this.overlay,
			imgClick: e => this.animateImgClick(e)
		})));
	}
}
ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js"></script>
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap");
:root {
  --text-color: #fff;
  --bg-color: #fff;
  --text-color-alt: #000;
  --grey: #808080;
  --text-color-4: #211f1f;
  --preview-text: #fff;
}
html {
  font-size: 16px;
}
html,
body {
  height: 100%;
}
body {
  overflow-x: hidden;
  margin: 0;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-color);
  color: #fff;
}
#app {
  height: 100%;
}
h3 {
  font-size: 1.5rem;
}

.nav-item {
  position: relative;
  overflow: hidden;
  padding: 15px 0px 10px 0px;
  margin: 0 15px;
  letter-spacing: 1px;
  font-weight: bold;
}
.nav-item:after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 0%;
  height: 2px;
  background: var(--text-color);
  transition: all 0.32s ease-out;
}
.nav-item:hover {
  color: var(--text-color);
}
.nav-item:hover:after {
  left: 0;
  width: 100%;
}
.navbar-toggle {
  position: absolute;
  display: none;
  right: 35px;
  top: 16px;
  width: 30px;
  height: 30px;
  z-index: 1;
}
.toggle-bar {
  width: 20px;
  height: 2px;
  background: var(--link-text);
  top: 10px;
  right: 5px;
  position: absolute;
  transition: 0.26s ease all;
}
.toggle-bar:nth-child(2) {
  top: 15px;
}
.toggle-bar:nth-child(3) {
  top: 20px;
}
@media screen and (min-width:769px) {
    .navbar[data-expanded="true"] {
        height:auto !important;
    }
}
@media screen and (max-width: 1191px) {
  .navbar {
    padding: 35px 32px;
    width: calc(100% - 64px);
  }
}
@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
    justify-content: normal;
    background: var(--bg-color);
    padding: 10px 32px;
    height: 40px;
  }
  li {
    display: block;
    margin: 0;
  }
  .brand a {
    margin: 15px 0px;
  }
  .brand a,
  .nav-item {
    color: var(--link-text);
  }
  .brand a:hover,
  .nav-item:hover {
    color: var(--link-text);
  }
  .nav-item {
    margin: 0px;
  }
  .nav-item:after,
  .nav-item:hover:after {
    background: var(--link-text);
  }
  .navbar-toggle {
    display: block;
  }
  .navbar[data-theme="light"] {
    --link-text: #000;
  }
  .navbar[data-theme="dark"] {
    --link-text: #fff;
  }
  .navbar[data-expanded="false"] li > .nav-item,
  .navbar[data-expanded="false"] .nav-right > .nav-item {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.16s ease 0.16s, visibility 0.01s ease 0.16s,
      clip-path 0.16s ease;
  }
  .navbar[data-expanded="true"] li > .nav-item,
  .navbar[data-expanded="true"] .nav-right > .nav-item {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    visibility: visible;
    opacity: 1;
  }
  .navbar[data-expanded="true"] li:first-child > .nav-item {
    transition: opacity 0.16s ease 0.16s, visibility 0.01s ease,
      clip-path 0.16s ease 0.16s;
  }
  .navbar[data-expanded="true"] li:nth-child(2) > .nav-item {
    transition: opacity 0.16s ease 0.2s, visibility 0.01s ease,
      clip-path 0.16s ease 0.2s;
  }
  .navbar[data-expanded="true"] li:nth-child(3) > .nav-item {
    transition: opacity 0.16s ease 0.24s, visibility 0.01s ease,
      clip-path 0.16s ease 0.24s;
  }
  .navbar[data-expanded="true"] li:nth-child(4) > .nav-item {
    transition: opacity 0.16s ease 0.28s, visibility 0.01s ease,
      clip-path 0.16s ease 0.28s;
  }
  .navbar[data-expanded="true"] li:nth-child(5) > .nav-item {
    transition: opacity 0.16s ease 0.32s, visibility 0.01s ease,
      clip-path 0.16s ease 0.32s;
  }
  .navbar[data-expanded="true"] li:nth-child(6) > .nav-item {
    transition: opacity 0.16s ease 0.36s, visibility 0.01s ease,
      clip-path 0.16s ease 0.36s;
  }
  .navbar[data-expanded="true"] .nav-right > .nav-item {
    transition: opacity 0.16s ease 0.4s, visibility 0.01s ease,
      clip-path 0.16s ease 0.4s;
  }
  .navbar[data-expanded="true"] {
    height: 100%;
  }
  .navbar[data-expanded="true"] .navbar-toggle > .toggle-bar:first-child {
    transform: rotate(135deg);
    top: 15px;
  }
  .navbar[data-expanded="true"] .navbar-toggle > .toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .navbar[data-expanded="true"] .navbar-toggle > .toggle-bar:nth-child(3) {
    transform: rotate(-135deg);
    top: 15px;
  }
}
.App {
  height: 100%;
}
.img-hidden {
  display: none;
}
.slide-title {
  font-size: 4.375rem;
  margin: 0;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.title-wrap {
  line-height: 4.375rem;
  height: 4.375rem;
}
.slider-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.slider-text-container {
  width: 1170px;
  margin: auto;
}
.slide-number-container {
  position: relative;
  overflow: hidden;
  height: 2.125rem;
  display: block;
  opacity: 0;
}
.number-wrap {
  height: 2.25rem;
  width: 100%;
  position: relative;
}
.slide-number {
  font-size: 2rem;
  position: relative;
  display: block;
  width: 80px;
  font-weight: 700;
}
.slide-number-small {
  font-size: 1.25rem;
  position: absolute;
  top: 0px;
  left: 40px;
}
.slide-title-container {
  position: relative;
  overflow: hidden;
  height: 4.375rem;
  margin: 30px 0;
}
.slide-info-box {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--bg-color);
  padding: 30px 100px;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
.slide-info-box a {
  position: relative;
  color: var(--text-color-alt);
  font-size: 1.5rem;
  margin: 0;
  font-weight: bold;
  padding: 0px 0px 10px 0px;
  opacity: 0;
}
.slide-info-box a:after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 0%;
  height: 2px;
  background: var(--text-color-alt);
  transition: all 0.32s ease-out;
}
.slide-info-box a:hover:after {
  left: 0;
  width: 100%;
}
.slide-info-box h4 {
  color: var(--grey);
  margin-top: 15px;
  opacity: 0;
}
.slide-info-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  opacity: 0;
}
.slide-info-text {
  position: absolute;
  bottom: 32px;
  left: 0;
}
.slide-info-container h4 {
  color: #cccccc;
}
.slide-info-wrap {
  height: 1.875rem;
  overflow-y: hidden;
  line-height: 21px;
}
.slide-info {
  margin: 0;
  padding: 5px 0px;
}

@media screen and (max-width: 1191px) {
  .overlay-navigation {
    width: calc(100% - 150px);
    padding: 25px 75px;
  }
  .overlay-preview-wrap {
    padding-left: 60px;
  }
  .overlay-preview-title-number {
    bottom: 28px;
    left: -45px;
  }
}
@media screen and (max-width: 991px) {
  .overlay-preview-title-number {
    left: -40px;
  }
  .overlay-preview-title-text {
    font-size: 3rem;
  }
  .overlay-preview-title-number {
    bottom: 21px;
  }
}
@media screen and (max-width: 768px) {
  .overlay-preview-title-number {
    left: -35px;
  }
  .overlay-preview-title-text {
    font-size: 2.75rem;
  }
  .overlay-preview-title-number {
    bottom: 15px;
  }
}
@media screen and (max-width:700px) {
    .overlay-preview-title-number {
        display:none;
    }
}
@media screen and (max-width: 640px) {
  .overlay-preview-title-text {
    font-size: 2rem;
  }
}
@media screen and (max-width: 414px) {
  .overlay-preview-title-text {
    font-size: 1.5rem;
  }
  .overlay-navigation {
    width: calc(100% - 100px);
    padding: 25px 50px;
  }
  .overlay-preview-wrap {
    padding-left: 35px;
  }
}
@media screen and (max-height: 700px) {
  .overlay-slide-preview {
    height: 350px;
  }
}
@media screen and (max-height: 600px) {
  .overlay-slide-preview {
    height: 300px;
    margin:0px 5px;
  }
}
.preloader {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  z-index: 2;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.box {
  height: 40px;
  position: relative;
  padding: 15px;
}
.box-clip {
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.box-clip,
.box-clip2 {
  background: var(--bg-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1;
}
.box-clip2 {
  background: var(--text-color-alt);
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.preloader p {
  font-size: 2rem;
  margin: 0;
  color: var(--text-color-alt);
}

.slider-controls {
  position: relative;
  opacity: 0;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
}
.slide-prev-btn,
.slide-next-btn {
  position: relative;
  width: 30px;
  height: 20px;
}
.slide-prev-btn {
  margin: 0px 10px 0px 0px;
}
.slide-next-btn {
  margin: 0px 10px;
}
.slide-prev-btn:before,
.slide-next-btn:before,
.slide-prev-btn:after,
.slide-next-btn:after {
  position: absolute;
  content: "";
}
.slide-prev-btn:before,
.slide-next-btn:before {
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #fff;
  border-right: 2px;
  border-bottom: 2px;
  border-radius: 2px;
  background: transparent;
  top: 5px;
}
.slide-prev-btn:before {
  left: 0px;
  transform: rotate(-45deg);
}
.slide-next-btn:before {
  right: 0px;
  transform: rotate(135deg);
}
.slide-prev-btn:after,
.slide-next-btn:after {
  width: 30px;
  height: 3px;
  background: #fff;
  left: 0;
}
.slide-overlay-btn {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
.slide-overlay-btn:after,
.slide-overlay-btn:before {
  position: absolute;
  content: "";
  width: 8px;
  height: 18px;
  top: 2px;
  left: 0;
  background: linear-gradient(
    #fff 0%,
    #fff 42%,
    transparent 43%,
    transparent 53%,
    #fff 54%,
    #fff 100%
  );
}
.slide-overlay-btn:after {
  left: 10px;
}
.slide-footer-text {
  display: block;
}
.slide-image {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.theme-toggle {
  position: relative;
  z-index: 100;
  width: 32px;
  height: 20px;
  background: var(--text-color-alt);
  border-radius: 10px;
  margin: 5px 10px 2px 5px;
}
.theme-toggle span {
  position: absolute;
  background: var(--bg-color);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 4px;
  left: 4px;
}
Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.