We're adding a website builder to Queue. This is our first of many templates and we're using Relume react components for the website. Our goal is to have a lot of various templates so people can launch their agency faster.
Text/pictures are customizable with the website builder.
Each component is drag-n-droppable
I noticed some animation issues with certain relume react components, but that may be on us.
Hi Mas, This is looking amazing! 🙌🏻 Do you mind sharing which React components you had issues with?
https://www.relume.io/react-components/header-78 This one
import React , { useState, useEffect, useContext } from 'react';
import { Button } from "@relume_io/relume-ui";
import Filestack from "../../components/Builder/Filestack.js";
import ScrollAnimation from "react-animate-on-scroll";
const Header = (props) => {
const { heading, description, buttons, images } = {
...Header78Defaults,
...props,
};
return (
<header className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container flex flex-col items-center">
<ScrollAnimation animateIn={"fadeIn"} delay={200}>
<div className="mb-12 max-w-4xl text-center md:mb-18 lg:mb-20">
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-7xl header-title">{props.header}</h1>
<p className="md:text-md header-description">{props.subheader}</p>
<div className="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
{buttons.map((button, index) => (
<Button key={index} {...button} className="header-button">
{button.title}
</Button>
))}
</div>
</div>
</ScrollAnimation>
<div className="flex w-screen justify-start overflow-hidden">
<div className="grid shrink-0 grid-cols-1 gap-y-4">
<div className="grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center">
<div className="grid w-full grid-flow-col gap-4">
{props.images.map((image, imageIndex) => (
<ScrollAnimation animateIn={"fadeIn"} delay={imageIndex * 200}>
<div
key={imageIndex}
className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]"
>
<img
className="absolute inset-0 h-full w-full object-cover"
src={image.src}
alt={image.alt}
/>
</div>
</ScrollAnimation>
))}
</div>
</div>
{/* <div className="grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center">
{[...new Array(2)].map((e, index) => (
<div key={index} className="grid w-full grid-flow-col gap-4">
{images.map((image, imageIndex) => (
<div
key={imageIndex}
className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]"
>
<img
className="absolute inset-0 h-full w-full object-cover"
src={image.src}
alt={image.alt}
/>
</div>
))}
</div>
))}
</div> */}
</div>
</div>
</div>
</header>
);
};
Header.displayName = "Header";
// export { Header78, Header78Defaults };
export default Header
const Header78Defaults = {
heading: "Medium length hero heading goes here",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
buttons: [{ title: "Get started" }]
};
Header.fields = {
image_link: {
type: "custom",
label: "Logo",
render: ({ name, onChange, value }) => (
<Filestack name={name} onChange={onChange} value={value} />
),
},
header: {
type: "text",
label: "Header"
},
subheader: {
type: "text",
label: "Subheading"
},
images: {
type: "array",
arrayFields: {
src: {
type: "custom",
render: ({ name, onChange, value }) => (
<Filestack label="Portfolio image" name={name} onChange={onChange} value={value} />
),
}
},
defaultItemProps: {
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg"
},
},
logos: {
type: "array",
arrayFields: {
src: {
type: "text"
},
}
}
}
Header.defaultProps = {
header: "Webflow producitzed services",
subheader: "Delivering the best results possible faster than you can think!",
images: [
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 1",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 2",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 3",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 4",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 5",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 6",
},
],
logos: [
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 1",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 2",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 3",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 4",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 5",
},
{
src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
alt: "Placeholder image 6",
},
],
}
pasted my actual code
What issues did you face?
This isn't moving like it should. 2nd pic is of your logos component, which moves fine, so i'm guessing i imported the tailwind stuff correctly.
For Header78, I believe it's working fine on my end. If you can record a video showing how it isn't moving like it should, this would help. For Logo3, do you mind sharing the code?
I'm missing css classes it looks like. Specifically animate-marquee-top
I believe the Header78 isn't looping correctly in your case because you don't have the two same arrays with the images (you have it commented). This animation's concept is that before the first array's loop finishes, the second array begins, creating the impression of continuous looping. Also, regarding the Logo component, it seems that you have a max width on the container? This will prevent it from having the desired animation.