Animated dividers

Elements
1

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 :wink:

2

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.

3

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 :blush:

4

there is also the Reveal component that can animate anything placed inside it :slight_smile:

5

Thanks Ben. I’ve tried using the Reveal component but was unable to make it do anything!:grinning_face_with_smiling_eyes:

6

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.

7

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 there are a few examples of what I’m after on the home page.

Many thanks :folded_hands: :slightly_smiling_face:

8

is it something like this you want?elementsapp://downloadDocument/MrXDbsV6qKos

9

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: :backhand_index_pointing_right: Open Triosh3 Project in Elements

Let me know if you have any questions :slight_smile:

10

Dans better than me! :slight_smile:

11

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

12

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

13

Sorry, have updated the link for the project!

:backhand_index_pointing_right: Open Triosh3 Project in Elements