Near the top as you scroll down the battery “disassembles” and fades the outer cover.
I know Sitely can do scroll-based animations, but can it do it to this level? And if so, I’m assuming only V.5?
Hi @robdeanaz,
Yes, it is possible to achieve a somewhat similar result, even with some older versions of Sitely 5. Here’s an example of what you could get:
https://made-with-sitely.com/share/pile/index.html
The main drawback of vertical scroll animations in Sitely is that they can sometimes create a slight vibration effect, making the animation less smooth compared to the site you mentioned.
With Sitely 5, a new feature has been introduced: video playback during scrolling. This option allows you to play or rewind a video based on the user’s scroll movement, which can sometimes be a better alternative. If you have some basic video editing skills, you could, for example, create a video simulating a stack being taken apart (to use the example mentioned) and enable video playback on scroll to achieve a similar effect while maintaining better fluidity.
He he he @Allan you beat me to it!
I was also trying to get the animation effect and got close by introducing Custom Control / Stack.
But you are right it is nearly all doable in Sitely.
It would be a great additional feature if some of the animations on scroll had 3 settings, like not-visible, visible, not visible.
Haha!
You mean making an element visible and then hiding it again? Yes, that would be a great feature to add! But in the meantime, there’s a trick to achieve this effect:
If you have an element (or a group) with an animation, you can group it with an invisible box and then add an animation to this new group. This allows you to apply a second animation to the elements inside it.
That’s exactly what I did on this site: https://dofus-astro.fr/
On the homepage, the texts appear at the bottom of the page and then disappear when they reach the top.
Gotcha! A good solution and effect!
Wait, did you just copy that element into Sitely and then modify it, or did you copy the individual elements and do a ground-up build???!!! And that output is from Sitely, not a GIF or other external animation element?
Man, you just made my brain go sideways…
This!
…
Post must be 20 characters
On the website you shared, this animation is created using five separate images. I simply extracted these images from the site, copied and pasted them into Sitely, and then added animations to each of them to recreate a similar effect.
I would have liked to share the project with you so you could take a closer look, but since I no longer have access to versions prior to Sitely 5, you wouldn’t be able to open it. That said, this animation doesn’t rely on any specific Sitely 5 features.
Thanks guys, this is the only forum where I’m NOT the expert and getting help rather than giving it. Nice change of pace.
Ciao