# Animated dividers **URL:** \ **Category:** Elements\ **Created:** [September 4, 2025, 7:53pm UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794 "2025-09-04T19:53:35Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![musicalbodger](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@musicalbodger](https://forums.realmacsoftware.com/u/musicalbodger)\ **Post date:** [September 4, 2025, 7:53pm UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/1 "2025-09-04T19:53:35Z")
Hello all. I may be being a bit dumb here but how do I make an animated divider in Elements? Can’t seem to find a way to do it. I want it to change colour to a gradient as it appears in the browser window. Managed it easily in Classic with Foundry and Stacks but… How about a ready made component, @dan 😉 ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [September 4, 2025, 8:27pm UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/2 "2025-09-04T20:27:27Z")
There is already a Divider component in Elements that can be set up with a gradient, but there is no built-in way to animate it. Depending on the type of animation, you might be able to accomplish it by adding Tailwind classes in the Advanced section of the settings. Or possibly you could place the divider inside a Flex and then animate the flex with the built-in options. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [September 4, 2025, 8:46pm UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/3 "2025-09-04T20:46:37Z")
> [@musicalbodger](#): > > I may be being a bit dumb here but how do I make an animated divider in Elements? Can’t seem to find a way to do it. I want it to change colour to a gradient as it appears in the browser window. Shouldn’t be too hard to build as a custom component. Do you have an example of what you want? Let me know and I’ll see if I can whip one up for you 😊 ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [September 5, 2025, 6:48am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/4 "2025-09-05T06:48:21Z")
there is also the [Reveal component](https://docs.realmacsoftware.com/elements-docs/components/reveal) that can animate anything placed inside it 🙂 ---
**Author:** ![musicalbodger](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@musicalbodger](https://forums.realmacsoftware.com/u/musicalbodger)\ **Post date:** [September 5, 2025, 9:35am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/5 "2025-09-05T09:35:55Z")
Thanks Ben. I’ve tried using the Reveal component but was unable to make it do anything!😄 ---
**Author:** ![musicalbodger](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@musicalbodger](https://forums.realmacsoftware.com/u/musicalbodger)\ **Post date:** [September 5, 2025, 9:38am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/6 "2025-09-05T09:38:50Z")
Thanks Robin. I’ve achieved a gradient filled divider, it’s the animation that’s stumping me. I know the basics of html & css but I’m too busy, and life is too short, to begin learning new code. ---
**Author:** ![musicalbodger](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@musicalbodger](https://forums.realmacsoftware.com/u/musicalbodger)\ **Post date:** [September 5, 2025, 9:43am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/7 "2025-09-05T09:43:28Z")
Thanks Dan, really appreciate that. I’m sure it’s not too difficult but I just can’t find a way to achieve the results I want. If you check out [triosh3.co.uk](http://triosh3.co.uk) there are a few examples of what I’m after on the home page. Many thanks 🙏 🙂 ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [September 5, 2025, 10:39am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/8 "2025-09-05T10:39:41Z")
is it something like this you want?[elementsapp://downloadDocument/MrXDbsV6qKos](elementsapp://downloadDocument/MrXDbsV6qKos) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [September 5, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/9 "2025-09-05T10:41:05Z")
Hey @musicalbodger, I re-made part of your site in Elements, here’s a quick video demoing a few bits… And here’s the Project for you to play with: 👉 [Open Triosh3 Project in Elements](elementsapp://downloadDocument/jr53z1EASxvz) Let me know if you have any questions 🙂 ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [September 5, 2025, 10:44am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/10 "2025-09-05T10:44:12Z")
Dans better than me! 🙂 ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [September 5, 2025, 11:09am UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/11 "2025-09-05T11:09:27Z")
Just having a play but this link downloads Video not project. I have been following video trying to get a better way of dpoind what I di above but I can not get reveal to be a child of the divider, but can get divide to be a child of reveal. What am I doing wrong? Just having download of animation would be good to add to my animation folder. TIA ---
**Author:** ![musicalbodger](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@musicalbodger](https://forums.realmacsoftware.com/u/musicalbodger)\ **Post date:** [September 5, 2025, 12:01pm UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/12 "2025-09-05T12:01:26Z")
Thanks @dan, very helpful. I obviously didn’t mess around enough with the Reveal component to get what I needed. The Project only downloads the video, by the way. Much appreciate your help, thanks. Steve ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [September 5, 2025, 1:16pm UTC](https://forums.realmacsoftware.com/t/animated-dividers/50794/13 "2025-09-05T13:16:46Z")
Sorry, have updated the link for the project! 👉 [Open Triosh3 Project in Elements](elementsapp://downloadDocument/jr53z1EASxvz)