Can Sitely Do This?

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.

3 Likes

He he he @Allan you beat me to it! :slight_smile: :clap:
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.

1 Like

Haha! :smiling_face_with_tear:

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.

2 Likes

Gotcha! A good solution and effect! :slight_smile: :clap: :clap:

1 Like

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! :clap:


Post must be 20 characters

1 Like

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