0

When you look at the website of https://www.mercedes-benz.com/en/ and you scroll down, all the content eases in. When you scroll all the way down and scroll back up again (slowely), you also see the content (blocks) easing out again. When you are back at the top and scroll down again, all the content starts to ease in again.

I know something like lazy load or ease in with jQuery but once it is loaded the animation is done. When you scroll back to top nothing eases out. So you can't do the ease in animation again.

I found an example (not the exact animation I want but I can change that) like this with the fading in: https://codepen.io/chriscoyier/pen/DjmJe

This is the javascript they used:

(function($) {
  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible"); 
  } 
});

win.scroll(function(event) {
  
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in"); 
    } 
  });
  
});

I am not a javascript expert but is it possible to also let it ease out when I scroll to top and ease back in when I scroll down?

user2812779
  • 193
  • 3
  • 19
  • 1
    To make things easier, why don't you use javascript libraries like AOS, or scroll reveal to make scrolling animations? – Love2Code Dec 17 '20 at 16:14
  • Thanks for your comment. I'm just new to this and I was just curious if it is possible with this current example I posted. But I will certainly take a look at your advice, thank you:) – user2812779 Dec 17 '20 at 16:18
  • No problem, scrolling libraries, especially AOS, are extremely easy to use. – Love2Code Dec 17 '20 at 16:21

0 Answers0