I'm missing css classes it looks like. Specifically animate-marquee-top
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.
pasted my actual code
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",
},
],
}
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.
we launched our rebrand a few weeks ago. We're going video first for everything and it's all relume. Would love any feedback. https://usequeue.com/

