Scroll Reveal problem

Hi,

I have disabled the header and instead I am using a slider at the top of my page in module position Top1. In the Top2 position I have a text module but the text animation doesn’t wait until scroll to appear. The text is already revealed on load. I think that it might be because theres not enough distance between my top1 and top2 positions.

So here is my question…
Is there a way to control when during the down scroll the animation starts?

Sorry for bumping but I did some more checking and It’s not viewpoint related. It seems it’s the slider itself that triggers the animation to start in the below module. Any ideas on how to solve this?

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hello Teitbite, I just sent you a PM.

Hi

I could be able to see the problem, but it's connected with position of the below text. If even the smallest portion of a layer with this element is visible after opening the page than it is loaded instantly. Is screen is smaller than scrollReveal has a chance to acctually reveal it on scroll

http://g.recordit.co/OEwXosAiFn.gif

Thanks for taking your time Teitbite but I’m not quite convinced. Please check the page again. I have now added the newsletter module between the slider and the below module and it still pre triggers the animation.

Hi

Ok. Good test. I've send Your question to programmers. Will let You know when they will answer.

Ok thanks

Hi

It took some time, but I've finally figured it out I've change the config value for vFactor to 0.90. This way it started to work.

You can find this line 520 of /layout/default.php :

Code: Select all

vFactor: 0.90


Hello teitbite and thanks a lot for taking your time.

When I go to line 520 of /layout/default.php then this is the code I see...

Code: Select all

      <?php if($this->API->get('js_scrollreveal', '1') == '1') : ?>
   <script>
      if(jQuery(window).outerWidth() > 600) {
         function startCounting(el, final) {
            var time = el.attr('data-time') || 1000;
            var increase = Math.floor(final / (time / 24));
            
            if(increase < 1) {
               increase = 1;
            }

I don't quite understand where exactly in the code I'm suppose to enter the code vFactor: 0.90

Kind Regards

Hi

In my copy I can see this code around line 520:

Code: Select all

         var config = {
            complete: function(el) {
               el = jQuery(el);
               
               if(el.attr('data-count')) {
                  startCounting(el, el.attr('data-count'));
               }
               
               if(el.hasClass('gk-add-rotate-animation')) {
                  el.addClass('gk-rotate-animation');
               }
               
               if(el.hasClass('bar')) {
                  el.addClass('gk-loaded');
               }
               
               if(el.parent().hasClass('gkNspPM-NewsSlider')) {
                  el.attr('style', '');
                  el.parent().addClass('gk-run-animation');
               }
               
               if(el.hasClass('gk-border-anim')) {
                  el.addClass('gk-anim-complete');
               }
            },
            mobile: true
         };
         window.sr = new scrollReveal(config);


and after adding the vFactor it should looks like:

Code: Select all

         var config = {
            complete: function(el) {
               el = jQuery(el);
               
               if(el.attr('data-count')) {
                  startCounting(el, el.attr('data-count'));
               }
               
               if(el.hasClass('gk-add-rotate-animation')) {
                  el.addClass('gk-rotate-animation');
               }
               
               if(el.hasClass('bar')) {
                  el.addClass('gk-loaded');
               }
               
               if(el.parent().hasClass('gkNspPM-NewsSlider')) {
                  el.attr('style', '');
                  el.parent().addClass('gk-run-animation');
               }
               
               if(el.hasClass('gk-border-anim')) {
                  el.addClass('gk-anim-complete');
               }
            },
            mobile: true,
                                vFactor: 0.90
         };
         window.sr = new scrollReveal(config);



You are probably using a different version of template, but this code should be there, just maybe in a different place.