**I am having problems creating a preloader component just like on Dennis Snellenberg’s website
I am trying to create the preloader where it shows the Greetings in multiple languages and later goes to the homepage.
Who can someone pls help? Thanks!
Wix Studio Editor
**I have tried using Wix IDE. I created a folder under src called components with anim.js, index.jsx, style.module.scss
**I have also gone to “Page Code” to “Home” and inserted this code.
‘use client’;
import styles from ‘./style.module.scss’;
import { useEffect, useState } from ‘react’;
import { motion } from ‘framer-motion’;
import { opacity, slideUp } from ‘./anim’;
const words = [“Hello”, “Bonjour”, “Ciao”, “Olà”, “やあ”, “Hallå”, “Guten tag”, “Hallo”]
export default function Index() {
const [index, setIndex] = useState(0);
const [dimension, setDimension] = useState({width: 0, height:0});
useEffect( () => {
setDimension({width: window.innerWidth, height: window.innerHeight})
}, [])
useEffect( () => {
if(index == words.length - 1) return;
setTimeout( () => {
setIndex(index + 1)
}, index == 0 ? 1000 : 150)
}, [index])
const initialPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${dimension.height} Q${dimension.width/2} ${dimension.height + 300} 0 ${dimension.height} L0 0`
const targetPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${dimension.height} Q${dimension.width/2} ${dimension.height} 0 ${dimension.height} L0 0`
const curve = {
initial: {
d: initialPath,
transition: {duration: 0.7, ease: [0.76, 0, 0.24, 1]}
},
exit: {
d: targetPath,
transition: {duration: 0.7, ease: [0.76, 0, 0.24, 1], delay: 0.3}
}
}
return (
<motion.div variants={slideUp} initial="initial" exit="exit" className={styles.introduction}>
{dimension.width > 0 &&
<>
<motion.p variants={opacity} initial="initial" animate="enter"><span></span>{words[index]}</motion.p>
<svg>
<motion.path variants={curve} initial="initial" exit="exit"></motion.path>
</svg>
</>
}
</motion.div>
)
}
.introduction{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 99;
background-color: #141516;
svg{
position: absolute;
top: 0;
width: 100%;
height: calc(100% + 300px);
path{
fill: #141516;
}
}
p{
display: flex;
color: white;
font-size: 42px;
align-items: center;
position: absolute;
z-index: 1;
span{
display: block;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
margin-right: 10px;
}
}
}