# Dev Diary Ep34 - Hover Effects

**URL:** <https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507>\
**Category:** Elements\
**Created:** [September 3, 2024, 10:09am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507 "2024-09-03T10:09:40Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**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 3, 2024, 10:09am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/1 "2024-09-03T10:09:40Z")

</div>

Hi,

Last week I teased that we’d be showing off a _“bigger feature that will enable us to do a lot of exciting things in the future”_. Typically, it’s not quite ready to reveal this week, however, we have just added a fun new animation feature to Elements…

![CleanShot 2024-09-03 at 10 .33.41](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/6/e683154c84f8464c170b3c9fc0b52205f20e5ee6.gif)

Later this week we’ll be releasing Elements Beta 8, it features the ability to apply fancy animations to your Components. We’re focusing on Hover animations first, later betas will have scroll based animations.

![CleanShot 2024-09-03 at 10 .38.46](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/4/a46a7e138efb16e39938fde7d6c5585b0c6d89e3.gif)

Here’s this weeks video that goes into more detail about how the new animation features works. It’s worth watching all of the video as I go into more advanced use cases towards the end, including how to animate multiple items at the same time.

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/1/b1c6921812cb14344eca8d4b148e5815f072464b.jpeg "Dev Diary Ep34 - Hover Animations") ](https://www.youtube.com/watch?v=I1Td0f7Vejg)

## Project Resource

- [Download Elements Animation Project](https://www.realmacsoftware.com/downloads/elements/projects/animation-after.zip)

## Get The Beta

You can [sign-up here to be notified](https://www.realmacsoftware.com/rapidweaver/elements/) when the Elements beta is publicly available. Please note, we’re adding new users slowly to the private beta to enable us to manage all the feedback. If you’re already on the waiting list, just hang-tight, we will get to you soon!

## Feedback

Keep the feedback coming, and if you have any thoughts about the features demoed today please post them below.

See you next week 👋

Thanks,  
Dan & Team Realmac.

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [September 3, 2024, 10:46am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/2 "2024-09-03T10:46:05Z")

</div>

Looks very cool.

I’m not sure what Transform option are available in Tailwind but a mono option would be very nice. Have a nice mono thumbnail which transforms to a slightly larger colour thumbnail when hovering.

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [September 3, 2024, 12:56pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/3 "2024-09-03T12:56:51Z")

</div>

You can see the excitement on your face Dan. Thank you much for the hard work on these new features. I have a feeling the end product will be fantastic!

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [September 3, 2024, 1:51pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/4 "2024-09-03T13:51:11Z")

</div>

Yes! You are following the basic UI laws. The tools are where you expect it to be. Very well done!

---

<div class="post-metadata">

**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 3, 2024, 2:53pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/5 "2024-09-03T14:53:10Z")

</div>

> [@Flash](#):
>
> You are following the basic UI laws. The tools are where you expect it to be. Very well done!

Phew, glad you guys like it ☺

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [September 3, 2024, 10:02pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/6 "2024-09-03T22:02:49Z")

</div>

I’m not trying to get ahead of RealMac here but with the mention of scrolling animations can we assume this will include things like parallax motion etc?

---

<div class="post-metadata">

**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 3, 2024, 10:12pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/7 "2024-09-03T22:12:22Z")

</div>

No problem! Do you (or anyone else here) have examples of the type of parallax you’d like to create in Elements?

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [September 3, 2024, 10:33pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/8 "2024-09-03T22:33:30Z")

</div>

Not specifically but it sounds like it’s doable so there’ll be options 🙂

Will it also be possible to animate entire containers from outside the page [like here](https://promo-theme.com/novo/home-freelancer) Like a Slide in, slide up effect with containers full of content.

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 5, 2024, 3:50pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/10 "2024-09-05T15:50:49Z")

</div>

> [@dan](#):
>
> Later this week we’ll be releasing Elements Beta 8, it features the ability to apply fancy animations to your Components.

Is it likely to be today (Thursday)? 😀

---

<div class="post-metadata">

**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, 2024, 4:24pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/11 "2024-09-05T16:24:24Z")

</div>

> [@trinube](#):
>
> Will it also be possible to animate entire containers from outside the page [like here](https://promo-theme.com/novo/home-freelancer) Like a Slide in, slide up effect with containers full of content.

Working on it 😉

---

<div class="post-metadata">

**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, 2024, 4:32pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/12 "2024-09-05T16:32:18Z")

</div>

> [@logrunner](#):
>
> Is it likely to be today (Thursday)? 😀

We’re aiming for tomorrow (Friday) now as we’re just trying to finish off a little something new…

---

<div class="post-metadata">

**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 6, 2024, 6:52pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/14 "2024-09-06T18:52:55Z")

</div>

FYI: Beta 8 just dropped and there’s a sample project and preview video in the post, enjoy!

> [@Elements Beta 8 (Build 22880)](https://forums.realmacsoftware.com/t/elements-beta-8-22880/44562):
>
> Slightly later than planned, but today we’re pleased to announce Elements Beta 8 has just shipped tada This new build contains component fixes and all new transition effects!!! This new transition feature is perfect for doing rollover effects. Watch the [dev diary we recorded earlier in the week](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-animations/44507) to learn more about using them — although, more features have been added since this was recorded! You can also [download this sample transition effects project](https://dl.elementsapp.cloud/g/sNpVMqw7oqSE) (from the video below) for an idea on how…

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [December 11, 2024, 9:10pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep34-hover-effects/44507/15 "2024-12-11T21:10:38Z")

</div>

Hi Dan, I’m rebuilding [our office site](https://crimilex.be/) in Elements. On the welcome page, I used a parallax effect. Any idea how to manage this in Elements?
