Dev Diary Ep52 - Reveal Component

Hello again,

This week we’re introducing the Reveal Component — With this new component, you can apply animations as elements come into view, or attach them to the scroll position. It’s taken us a while to get to this point, as we’ve restarted on this component many times! We now think we finally have a good balance between ease of use and control, all without making the component overwhelming. Let us know what you think.

Watch this weeks video to see how it works, and look out for the beta later this week…

Pssst, there’s also some advanced code based features…

Not mentioned in the video, but if you’re building your own custom components you can take advantage of the Elements animation library by applying some classes to your code. Check out the Reveal Component docs to learn more!

Thanks for your Feedback

As always, keep the feedback coming. Your input has made all the difference so far, thank you!

See you soon,
Dan & Team Realmac.

8 Likes

This looks good!

1 Like

:astonished: Oh No, so does this replace the previous Scroll Effects ?

Scroll Effects seemed more fine tunable while this new video seems more liked canned effects. Didn’t find the Scroll Effects in the Element Docs thats why I’m asking.

Thanks

Hi @DaveMac, yes the Reveal component does indeed replace scroll effects, we found this implementation was overly complex, confusing to setup, and error prone. The Reveal component is the replacement for now, and should hopefully satisfy the majority of users.

We know there’s better ways to handle advanced types of animation, i.e. a proper timeline with keyframes, but that requires more work on the core app and not something that needs to be done right now. We certainly plan to revisit this at a later date, and “do it right”.

Have a play with the Reveal Component when the beta update ships later week, and let us know if there’s anything specific you’re missing!

2 Likes

Thanks for the response.

I’m not part of the private beta just watching things unfold in anticipation for the public beta / trial / release.

Regarding the change I preferred the original Scroll Effects and was very excited about that version as I’m familiar with GSAP (if you recall). To me personally this new approach feels way more dumbed down like AOS.js instead of the powerful GSAP. So the first iteration seemed better in my opinion.

:crossed_fingers:

You’ll be pleased to know that GSAP is under the hood in Elements! We’re just being more careful about what we expose right now… So there’s plenty of potential to expand upon the reveal component based on beta testers feedback!

1 Like

Yes, I confirmed previously by seeing the GSAP links in the Reveal Component doc. Just saying the new scaled back approach now feels like AOS.js. Curious to see how it all unfolds and evolves with time, as it can definitely expand from where it now is. :grin:

1 Like

For those on the beta, please start your update engines — Beta 24 just went live, release notes here!

Looks great! Element animation is an important human factors design and knowledge navigation consideration I obsess over for every site I design (and visit!).

Playfully, usefully and unobtrusively guiding people to, and through, information is really important from a usability, effectiveness and ‘delight’ perspective. I hope that, as you mentioned, the beta with the Reveal component has the more granular approach (pixels/viewport) to adjusting when the animation occurs (as opposed to the three positions tied to scroll and scrub.

Looking forward to this.

1 Like

The new reveal component is a welcome addition and works very intuitively. However, I do find it a bit of a drawback that you have to switch to preview mode each time to see the result. This somewhat detracts from the idea of Elements being a WYSIWYG tool. But I assume this is technically challenging to achieve.

1 Like

I know I’m late to the comments here. I am in agreement that this is a much improved UI for using animation and reveal. Of course over time tweaks will be welcomed. Agree with your comments on start and end points needing more flexibility.

1 Like

It seems Elements is balancing a fine line regarding its target market. Which I likewise keep pondering as things unfold and features expand or change.

On one hand it’s understood concerning the need to capture existing RapidWeaver users and those desiring ease of use. On the other hand one can foresee Elements being adopted as a tool for those who discover it as a visual Tailwind builder for macOS with visual GSAP features also.

Those two huge industry names could bring a flood of revenue for RealMac from macOS designers and developers alike. Which gets back to balancing a fine line concerning the thoughtfulness of features and exposed capabilities.

Not too overwhelming for some but not too scaled back for others.

I’ll keep watching. :face_with_monocle: :smile:

2 Likes