3

I'm using the ScrollReveal library to animate in sections of my site.

I have a pretty complex vector which contains five groups. I'm trying to animate these five groups in separately using this library.

Here is my approach currently:

My SVG is a bit lengthy and Stack has a body count character limit, so I created a demo using JSFiddle here.

Each group has a class and as you can see from the demo, it initially loads, then disappears. None of the reveal effects are working? I have other divs with the same parameters which work, but it doesn't work with this SVG for some reason?

If we inspect the white space, I can see that the parts are not appearing because the opacity is 0. But, on scroll, this opacity isn't changing and I don't want to force opacity to 1 via CSS as this I want the part to fade in nicely, whereas setting it to 1 will just make it a static image.

Freddy
  • 683
  • 4
  • 35
  • 114

1 Answers1

0

I encountered this same issue. I could not figure out how to get the opacity to work using ScrollReveal directly, so I ended up using ScrollReveal to detect the scroll position and then trigger a callback function to toggle the class. It doesn't require much CSS, but it does require a little bit.

Here's a generic version of my code as an example:

@ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

svg {
    .class-one {
        opacity: 0;
        transition: opacity 8000ms @ease-out-expo;
        &.visible {
            opacity: 1;
        }
    }
    .class-two {
        opacity: 0;
        transition: opacity 8000ms @ease-out-expo;
        &.visible {
            opacity: 1;
        }
    }
    .class-three {
        opacity: 0;
        transition: opacity 8000ms @ease-out-expo;
        &.visible {
            opacity: 1;
        }
    }
}

    (function($) {
        // Reveal the block
        ScrollReveal().reveal(".container", {beforeReveal: showGraphic, viewFactor: 0.3});
        
        // Define the showGraphic function
        function showGraphic() {
            $(".container svg .class-one").addClass( "visible" );
            
            setTimeout(function() {
                $(".container svg .class-two").addClass( "visible" );
            }, 1800);
            
            setTimeout(function() {
                $(".container svg .class-three").addClass( "visible" );
            }, 3600);
            
        }
        
    }(jQuery))
codafogo
  • 1