Animations don't fire if too close to bottom edge of screen - footer

[pingram3541]

One needs to scroll a specific distance past an element for it to animate ("fade-in" for example). If one uses Elementor to create a template used in a theme's footer widget space for example, the animation may never fire.

This had me stumped and had me thinking the code wasn't executing and then I realized the html/css is all there, just not the trigger event to actually see it. I don't have any suggestions on what to do here but have since gone around the problem by removing the animations from the elements until there is a better approach.

[Bounty31]

I also noticed this problem which is painful when trying to animate the footer but also other important elements like for example an arrow that flies in from the bottom of the screen to show to the user that he can scroll down, etc...

Also currently there is no way of defining a delay per device size, so if you have a delay on some element for desktop it will have exactly the same on mobile which in many cases doesn't make sense.

I don't know how this is currently handled but it would be amazing to have the option to define when an animation should start relative to another element's animation or simply a scroll percentage trigger.

[pingram3541]

Exactly, I too have had issues with designs that use a full page section for the initial above-the-fold content and cannot use an entrance animation for an icon/anchor if it is too close the the bottom of the screen because the trigger doesn't fire until one scrolls past it which defeats the reason you want something there attracting attention in the first place.

I've had to get tricky with custom js using scrollTop and custom css to override animation delays. I use Elementor Pro so custom css is pretty easy to do and one can also use the html element to add style/script tags but I'm also in high hopes like you that this will change in the near future =)

[Bounty31]

@pingram3541 I also use Elementor Pro, how did you fix it?

I also noticed that the problem is even worse when trying to animate in big widgets like Portfolio or Posts where you have to scroll a lot before anything appears. Would be nice to have grid animation possibilities on those widgets.

@KingYes Did you ever consider using GSAP Animation library to have more flexibility with the Elementor animations instead of CSS? :)

[pingram3541]

@Bounty31 - animation delay is an easy one as in recent releases they now provide a delay option that works most of the time. However, in the case of Hero sections and the popular bouncing "more" icon at the bottom, Elementor doesn't provide a way to set a repeatable animation loop w/ defined intervals so instead I use my own, i.e. style.css:

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

And then on the icon element I provide a class bounce.

As for the scroll fix, it was a tad more involved. Inspecting the code, all elements with intro animations are assigned a class to set visibility to none.

.elementor .elementor-invisible {
    visibility: hidden;
} 

Adding some custom javascript to trigger on my own event and remove that class works. Of course Elementor's trigger can still fire if it's condition is met but if the element already has the elementor-invisible class removed, it doesn't effect anything since the element is already visible. Some simple jQuery would be something like this:

(function($){
  $(window).on('scroll', function(){
    var trigger = $('.some-element-well-above-my-icon-scrolled-past').offset().top;
    var scrolled = $(window).scrollTop(); //value from top of window
    if( scrolled > trigger ){
      $('.my-icon-element-selector').removeClass('elementor-invisible');
    }
  });
})(jQuery);

[Bounty31]

@pingram3541 That looks like the only available solution right now thanks for taking the time to show the code! It will help quite some people :)

[pingram3541]

FYI, Theme My Login version 6.4.10 causes script errors which keep fade-in animations from firing in Elementor. (tested w/ 1.9.8 on 3 different hosts) - use another hide my login mechanism for the time being

[NVaa]

so... this bug hasn't yet resolved?
I just had this problem (one year later)...
I saw @pingram3541 solution, but I can not implement it, because I do not have access to CSS (no pro version).
Is there any other solution?
I think it is very basic desire, for such well known page builder, to be able to add the provided effects to your whole page.

[mdrideout]

I am still having issues with entrance animations and scroll position detection. If I have a really long page, I eventually have to start scrolling past elements before the entrance animation fires. The lower I scroll, the worse the offset gets. It's fine near the top of the document, but after about 4-5 page heights, the items just stop entering all together.

[pingram3541]

@KingYes @bainternet Maybe it would be great to have a "vertical offset" field when enabling the entrance animations which can take a negative/positive value in px/%/vh to set the trigger position, say 300px above said element's position in the actual flow.

[L-U-C-K-Y]

+1 we would also highly appreciate this feature! Currently, the fade-in‘s are appearing too late.

[stfr]

Hello, any solution for vertical offset ? I have the same problem, animated elements appear very late on scroll (when you don't need to see it anymore)

[stfr]

UPDATE : it can be caused by lazy-load . In my case i used smush. Simply disabled it, and everything is going well.

[L-U-C-K-Y]

UPDATE : it can be caused by lazy-load . In my case i used smush. Simply disabled it, and everything is going well.

Thanks @stfr this solved it for us!!!

[PaddyThorne]

UPDATE : it can be caused by lazy-load . In my case i used smush. Simply disabled it, and everything is going well.

This fixed the issue for me. Many thanks for posting your solution :)

[leonardeveloper]

I'm still getting this issue. I added a counter element above my footer and it is stuck at 0!

[stfr]

Unfortunately, i don't have another solution. The best solution is probably to exclude your counter element from lazy-loading by adding a class, or something else. (you can add a custom class in some packages )