v4 - Use classes to properties to reveals

[ekfuhrmann]

In the current stable version of SR, I was able to apply multiple classes with SR attributes to it.

So as an example, I'd have the following:

var revealLeft = {
    duration   : 700,
    distance   : '30%',
    easing     : 'ease-in-out',
    origin     : 'left',
    scale      : 1,
    viewFactor : 0.5,
};

I'd then tie the reveal to a class, like so: sr.reveal('.sr-left', revealLeft);. As expected, this would animate the section when it comes into view from the left.

Occasionally, I'd want to delay certain elements, so I created a new sr.reveal class like the following: sr.reveal('.sr-delay', { delay : 300 });.

As an example of how this would look within the HTML, markup, see the following:

<div class="card sr-left"></div>
<div class="card sr-left"></div>
<div class="card sr-left sr-delay"></div>
<div class="card sr-left"></div>

This would then reveal each card from the left, with the second-to-last one having a slight delay before animating in from the left.

Since v4, I've noticed that this no longer works. The delay class either does not work at all, or it removes the animation. It seems to now be a one or the other type deal, and I was wondering if there was any workaround or even if this was an unintended side-effect of another change?

[jlmakes]

You’re right that this does not work currently in v4—currently reveal() calls on the same element do not combine like they used to in v3.

I recall working with custom containers being a bit awkward when same-element reveal() calls could combine, which is why this change was intentional when rewriting the code.

I’ve been thinking of adding it back due to some other recent changes though, plus now it seems you can help me test it! 4.0.0-beta.10 is coming soon, which will honor the v3 behavior you’re used to. As always, I appreciate the feedback @ekfuhrmann.

[ekfuhrmann]

I look forward to checking it out! Do you have any estimate time drop for when you expect it to be ready (such as in a week or more)?

[jlmakes]

It’s hard to say with how difficult this sequencer has been in the past, but I think my new strategy thoroughly addresses the current bugs. I expect sometime this week! 🤐

[ekfuhrmann]

Not a problem, was just trying to strategize on my end on whether or not to revert back to the previous stable build for the time being. With the possibility of an update later this week I'll hold off on any plans to revert.

Thank you again for being so responsive!

[jlmakes]

Automated tests are passing, but manual testing shows issues with v4.0.0-beta.10

It seems the config overwriting behavior we discussed is working, but the new sequencer appears to break when all elements of a sequence are out of view. So I still have some debugging to do… but I’ve reopened the issue until I patch this over the next day or two.

[jlmakes]

v4.0.0-beta.11 is out @ekfuhrmann

Fixed a bug in the sequencer logic, and an error with options.container. There‘s one outstanding edge case (that I won’t mention teehee) but it’s working well in my tests. Let me know how it fares for you!

[ekfuhrmann]

Sounds great! I'll take it for a spin later today on my staging environment and report back with how it all goes.