Reveals fail on elements with a predefined transition for transform

[CallumBrankin]

• Windows 10
• Opera 51.0.2830.55
• ScrollReveal version 3.3.6

When a large element is within the view factor percentage on page load, ScrollReveal will not trigger the reveal animation on that element.

(function($) {
$(function() {
    window.sr = ScrollReveal({ reset: false });
    sr.reveal('section > *', {
        delay: 100,
        origin: 'bottom',
        distance: '80px',
        duration: 600,
        delay: 0,
        viewFactor: 0.06,
        easing: 'cubic-bezier(.21,.01,.38,1.15)',
        scale: 1.1
    });
});
})(jQuery);

The section element in question is 1841px in width and 3090px in height in desktop view. 311px width and 7868px height in mobile view (iPhone 7).

[jlmakes]

Hey @CallumBrankin

I'm getting the sense that the way options.viewFactor behaves doesn't match your expectations, but I'm not sure I understand what's going on. Do you mind creating a JSBin demo to better help me understand your problem?

[CallumBrankin]

@jlmakes I'll attempt to recreate it in JSBin

[jlmakes]

I just wanted to go on a quick detour to explore options.viewFactor before getting into your issue.

What does view factor actually do?

  Imagine we are scrolling down, and an element on our page is quickly moving upwards. If we have `options.viewFactor = 0` (which is the default in version 4), the top edge of the element is represented faithfully to its dimensions: This top edge is what ScrollReveal looks for, when checking if an element has crossed the viewport's bottom boundary—and when it does, the element is considered visible and animations are triggered. This would be the moment our element is considered visible: Now, if we were to use `options.viewFactor = 0.2` instead, our element's top edge would be moved inwards 20%: This adjustment doesn't change the rendered appearance of the element, only where ScrollReveal sees the top edge. So in this case, this would be the moment our element is considered visible: We've only looked at the **top** edge, but this behavior applies to all four edges: * Element's top edge compared to the viewport's bottom boundary. * Element's right edge compared to the viewport's left boundary. * Element's bottom edge compared to the viewport's top boundary. * Element's left edge compared to the viewport's right boundary.

[jlmakes]

Callum,

You're using ScrollReveal on a really really really tall element, and options.viewFactor = 0.06 means that 6% of its height must be past the bottom boundary before it's revealed—which on my screen, meant I had to scroll before anything was visible.

I would recommend options.viewFactor = 0.

That will guaranteed the text will be visible on page load... now let's look into why there's no animation.

"The main body of text is visible but doesn't animate in on page load."

Turns out, the div.panel.panel-narrow that you're revealing (which contains your really really tall content), also has a blanket CSS transition applied to it:

.page .panel {
    transition: all .3s ease-in-out;
}

I obviously have no idea what this is for in your project, but in this situation it is conflicting with ScrollReveal's CSS transitions, and preventing the initial animation from playing.

Good luck!

[CallumBrankin]

@jlmakes Thanks for the clarification!