anime.js and Parallax Scroll

[TomS-]

I don't know exactly where to share this, but I've made a parallax script to work with anime.js

$("[parallax]").each(function() {
  var $this = $(this), tl = anime.timeline({autoplay: false});

  $.each($this.attr("parallax").split(/[,\s]+(?={)/), function(i, v) {
    var v = eval("(" + v + ")");
    v.targets = $this[0];
    v.easing = "linear";
    tl.add(v);
  });

    $this = $this.is("[parallax-target]") ? $this.closest($this.attr("parallax-target")) : $this;

  var setup = function() {
        var bound = $this[0].getBoundingClientRect();
        var wHeight = $window.height();
    if (bound.top < wHeight && bound.bottom > 0) tl.seek( tl.duration * ( (wHeight - bound.top) / (wHeight + bound.height) ).toFixed(3) );
        else if (bound.top >= wHeight) tl.seek(0)
    else if (bound.bottom <= 0) tl.seek(tl.duration);
  }

  $($this.attr("parallax-scroll") || window).on("resize scroll", setup);
  setTimeout(setup, 50);
});

There is quite a bit you can do with this, but mostly use parallax="{transformY: [0, 50]}" for example and that will transform from 0 to 50 through the duration of the viewport, you can also do parallax="{opacity: [0, 1]}, {opacity: 0}" to fade in 50% into viewport then out at 100%. use parallax-target=".class" if an element is inside a block for example and you want to use that for the calculations.

You can also use parallax-scroll=".target" if this is inside a scrollable div.

It's super lightweight and simple, just thought I'd share the code for those who need it.

[evanre]

@TomS- Hi, can you provide some working examples with html? It's exactly what I searching.

update. I've modify your example for my needs. It works perfect. Thanks a lot! Here is my code:

$("[data-parallax]").each(function () {
    var $this = $(this);
    var animetl = anime.timeline({autoplay: false});
    var properties = {
        targets: $this[0],
        easing: "linear"
    };

    // Parse properties from attribute and add them to properties object
    $.each($this.attr("data-parallax").split(/[,\s]+(?={)/), function (i, value) {
        $.extend(properties, eval("(" + value + ")") );
    });

    animetl.add(properties); // add options object to timeline

    var parallaxSetup = function () {
        var bound = $this[0].getBoundingClientRect();
        var wHeight = $(window).height();
        if (bound.top < wHeight && bound.bottom > 0) {
            animetl.seek(animetl.duration * ( (wHeight - bound.top) / (wHeight + bound.height) ).toFixed(3));
        } else {
            if (bound.top >= wHeight) {
                animetl.seek(0);
            } else if (bound.bottom <= 0) {
                animetl.seek(animetl.duration)
            }
        }
    };

    $(window).on("resize scroll", throttle(parallaxSetup, 50));
    setTimeout(parallaxSetup, 50);
});

Html example: <div parallax="{translateY: [0, -50]}"></div> It will be moving during scrolling according to window.
p.s. You set wrong transfrom property. It shouldn't be transformY. Right property is translateY.

[juliangarnier]

Nice, I also use timeline seeking a lot for scroll based animations.
(I have to close the issue tho 😇)