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!
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.
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!
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.
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!
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.
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.
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.
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.
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.