Request to implement delay on some elements

[iapparatus]

How feasible is it to implement a 'delay' method so it would be possible to keep some elements in place for specified amount of time before they get animated (follow the scroll)? Primary use is for the elements that are located "above the fold". Looking for a way to start parallax scroll with elements animated one by one.

[iapparatus]

Another way yo describe what I'm thinking about is 'easing in / easing out' effect.

[p-realinho]

Hi, thanks for using Rellax.
I usually achieve this effect with just CSS transitions.
(I can't right now, but I'll leave some examples later)

[iapparatus]

@p-realinho Thanks!

[p-realinho]

Did it work?
Sorry, I forgot to post the examples 😕

[iapparatus]

I didn't try it yet. If you have an example that would be helpful.

[p-realinho]

.rellax {
    transition: transform .6s;
}

This is probably the bare minimum.
You can (and should) of course play with the durations and easings.

.rellax {
    transition: transform 30s cubic-bezier(0, 1.5, 0, 1);
}

I find this duration/easing combo particularly useful, because although the element follows the scroll immediately, it slowly keeps translating after the scroll stops, giving it a sort of really long ease-out effect.

Hope it helps!

[iapparatus]

Thanks, I played with various options and see what you mean now. It is an interesting effect that seems to work best for the "ease out". My goal is a bit different. I want to hold elements in position while the scroll is happening. Let's say you start scrolling and you want one of the elements to stay in original position for a second longer.

[moeamaya]

Hey @iapparatus, appreciate the issue, but I think this is well beyond the scope of the Rellax library.

I'm actually pretty into your idea, but I think it's worth writing something custom to make this work.