Using scrollReveal elements on a Bootstrap carousel

[jlmakes]

Using scrollReveal elements on a Bootstrap carousel

[jlmakes]

See Advanced Usage

Check out the init() method, it should help you achieve your desired effect. Essentially, it will trigger scrollReveal animations — which is helpful for generated content, and/or manually firing animations.

Moving forward, more robust event handling (see issue #36) are going to be the focus for the next release of scrollReveal.

[ksmueller]

I'm trying to use your great PlugIn with Bootstrap Carousel too.
Your link to "Advanced Usage" above is broken, I think: there's no paragraph named Advanced Usage or anything about the init() method.

Could you please provide a short example on how to init scrollReveal with Bootstrap Carousel?

[jlmakes]

Sure @ksmueller, you’ve resurrected an old issue (thanks for doing a search of past issues) and the response was out of date — let’s take a look at how we might solve this today.

• First, to make sure our element isn’t visible before we initialize ScrollReveal, make sure to add visibility: hidden to your element(s):

.myClass { visibility: hidden }

• Next, we’ll want to use version 3.0 for access to a powerful new JavaScript API. This will make it easy to setup multiple animations, and trigger them when we want. Grab 3.0 here: https://github.com/jlmakes/scrollReveal.js/tree/v3.0.0-RC
• Now let’s instantiate it, and setup our animations:

// sample config

var config = {
  move: '0px';
  scale: { power: '10%', direction: 'up' },
  over: '0.8s',
  viewport: document.getElementById('bscarousel')
}

// create a new instance attached to window so we
// can access it from anywhere within our code

window.sr = new ScrollReveal( config );

• I’m not familiar with the events, but for Bootstrap Carousel (based on the original posters code sample), it now might look something like this:

$('#bscarousel').on('slide.bs.carousel', function () {
    sr.reveal('.myClass'}).init();
}

There’s still probably a little more work to get it working the way you want, but hopefully this points you in the right direction. If you post back with your progress, maybe we can piece together a complete working example for posterity.

[ksmueller]

Hi, thanks for the time you took to improve ScrollReveal.js and create v3!

However, I still have issues with Bootstrap Carousel.
I made a codepen to fiddle with:
http://codepen.io/ksmueller/pen/BjBxvZ
I included bootstrap, jQuery and ScrollReveal-v3.

The BS Carousel is working nicely, the captions have visibility:hidden.
The event is correct, the alert fires, when you un-comment it.
In Firefox the caption gets visible once for each slide (it doesn't move or scale, though, it just fades in), but the captions stay hidden in Chrome

Any help is greatly appreciated :-)

[jlmakes]

@ksmueller

I’m not sure what to say about Chrome, but the animations only working once (in FireFox) is more or less what I expected from my suggestion… needs a little work, but...

It would probably be easier to create the CSS animation classes yourself and add/remove them inside the event callbacks, instead of trying to use ScrollReveal for this. 🙈