import { AbsoluteFill, interpolate, useCurrentFrame, Easing, } from 'remotion'; import {loadFont} from '@remotion/google-fonts/Lato'; import React from 'react'; import {Background} from './Background'; const {fontFamily} = loadFont('normal', { weights: ['300', '400'], subsets: ['latin'], }); const containerStyle: React.CSSProperties = { fontFamily, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', textAlign: 'center', padding: '160px 0', color: '#111111', }; const textStyle: React.CSSProperties = { fontWeight: '300', fontSize: 42, letterSpacing: '0.15em', }; const saleTextStyle: React.CSSProperties = { ...textStyle, fontSize: 180, fontWeight: '300', margin: '-40px 0', letterSpacing: '0.1em', }; export function ReerollVideo() { const frame = useCurrentFrame(); const fadeIn = (startFrame: number) => interpolate(frame, [startFrame, startFrame + 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const specialOfferOpacity = fadeIn(5); const saleAnimation = (delay: number) => { const opacity = interpolate(frame, [25 + delay, 40 + delay], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const translateY = interpolate(frame, [25 + delay, 60 + delay], [120, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.8)), }); return {opacity, transform: `translateY(${translateY}px)`}; }; const bottomTextOpacity = fadeIn(65); return (

SPECIAL OFFER

SALE

PRICES UP TO 50% OFF!

); }

Animated Sale Offer Promo Video with Palm Shadow

More like this

High-Fashion Coming Soon Promo Video

Social Media Marketing Services Promo Video

Food Promo Video

Healthy Food Menu Promo Video

Soda Product Showcase

Animated Service Showcase Video

Reeroll App Demo Video

Hiring Video

Animated Logo & Typeface Reveal

Logo animation