@wbe/[email protected]

Patch Changes

• 7ac5c12: fix: Interpol & Timeline reverse Promise

  play and reverse before the end of the play. The reverse promise was non-existent.
  The expected behavior is to get a a reverse promise who resolve when the reserve() is complete.

  before:

  const duration = 1000
  const itp = new Interpol({ duration })
  
  itp.play()
  await new Promise((r) => setTimeout(r, duration / 2))
  await itp.reverse()
  console.log("reverse complete") // bug: was called before the reverse end

  after:

  const duration = 1000
  const itp = new Interpol({ duration })
  
  itp.play()
  await new Promise((r) => setTimeout(r, duration / 2))
  await itp.reverse()
  console.log("reverse complete") // is called when reverse is complete

@wbe/[email protected]

Patch Changes

• 8470e1a: Add missing description & author in package.json

@wbe/[email protected]

Minor Changes

• c80c9cf: ## Back to basic Interpol instance functionalities

  The library has started to shift in size and maintenance away from its original purpose. Everything related to DOM processing will be removed from the Interpol instance. The use of Interpol for DOM manipulation is still available and the purpose of the library is still there, but it needs to be managed manually. Interpol needs to be kept as low-level as possible to allow anyone to implement a wrapper based on their needs.

  These breaking changes will make the API more predictable and focus on what this library is for, which is interpolating sets of values.

  Breaking changes

  • [ Breaking changes ] Remove props object constructor params, keep only ...props. In order to simplify the usage of props, a unique way to declare props is now "inline props" on the root constructor.

  before:

  new Interpol({
    props: {
      x: [0, 1],
    },
  })

  after:

  new Interpol({
    x: [0, 1],
  })

  • [ Breaking change ] Remove unit from props. Callback returns only number prop, units will be added by styles for basic. Props units are linked to a DOM manipulation. As others dom subjects, it have been remove from the API.

  before:

  new Interpol({
    props: {
      x: [0, 1, "px"],
      y: { from: 0, to: 10, unit: "px" },
    },
  })

  after:

  new Interpol({
   x: [0, 1],
   y: [0, 1]
   onUpdate: ({.x,y })=> {
     // props returned are always `number`
     // merge manually your unit to the value if needed
   }
  })

  • [ Breaking change ] el property has been removed from the constructor.

  before:

  // el style was automatically set
  new Interpol({
    el: document.querySelector("div"),
    props: {
      x: [0, 1, "px"],
    },
  })

  after:

  new Interpol({
    x: [0, 1],
    onUpdate: ({ x }) => {
      // always set manually the interpolate value on the DOM
      // No magic, more predictible
      document.querySelector("div").style.transform = `translateX(${x}px)`
    },
  })

  Features

  • [ Feature ] Improve styles function with autoUnits
    A 3th autoUnits param as been added to styles() function.

  declare const styles: (
    element: HTMLElement | HTMLElement[] | Record<any, number> | null,
    props: Record<string, string | number>,
    autoUnits: boolean = true,
  ) => void

  new Interpol({
    x: [0, 1],
    onUpdate: ({ x }) => {
      // x is a number, and translateX need to be a 'px'.
      // style will automatically set 'px' on selected properties if a number is set as param.
      styles(element, { x })
      // `translate3d(${x}px, 0px, 0px)`
  
      // we can disable autoUnits if needed
      styles(element, { x }, false)
      // `translate3d(${x}, 0px, 0px)`
    },
  })

  - [x] fix props key types

  • update Interpol / Timeline tests
  • update examples
  • update de documentation

@wbe/[email protected]

Minor Changes

• 042be0d: in addition to having an effect on the duration of the interpolation, InterpolOptions.durationFactor impact now delay & offset too.

  First, set new values on global options:

  InterpolOptions.durationFactor = 1000
  InterpolOptions.duration = 1 // default duration

  InterpolOptions.durationFactor as effect on interpol delay property:

  new Interpol({
    // will wait 100ms before start
    delay: 0.1,
  })

  InterpolOptions.durationFactor as effect on Timeline add() offset params:

  const tl = new Timeline({
    onComplete: (time) => {
      console.log(time) // 300
    },
  })
  
  tl.add({ duration: 0.2 })
  // start .1 after the first add
  // .1 is the offset of 100ms if global durationFactor is set to 1000
  tl.add({ duration: 0.2 }, 0.1)

@wbe/[email protected]

Minor Changes

• 292d244: Set a new the global durationFactor for each Interpol instances.
  It makes the Interpol usage more closer to gsap, if needed:

  import { Interpol, InterpolOptions } from "@wbe/interpol"
  
  // set a new global durationFactor
  InterpolOptions.durationFactor = 1000 // second
  new Interpol({
    duration: 1, // 1 = one second
    onComplete: (_, time) => {
      console.log(time) // 1000
    },
  })

@wbe/[email protected]

Minor Changes

• 17b0d4f: Interpol constructor accept inline props! Object props still working for Backward Compatibility.

  new Interpol({
        // Old object props remains available
        props: {
          x: 100,
          y: -100,
          // (will be overrided by inline props)
          top: -2000,
        },
        // NEW! inline props works outside the props object
        top: [0, 100],
        left: [-100, 100, "px"],
  
        onComplete: ({ x, y, top, left }) => {
        })
  })

@wbe/[email protected]

Minor Changes

• dc0f568: Use the initial Interpol ticker instance for all raf callback of the application.

  A new second param rank: number is added to add() method. It allows to choose in each order, the callback handker need to be executed. In this exemple, this one is second position, because Interpol ranking is 0

  import { InterpolOptions } from "@wbe/interpol"
  
  const tickHandler = (t) => console.log(t)
  const rank = 1
  InterpolOptions.ticker.add(tickHandler, rank)
  // ...
  InterpolOptions.ticker.remove(tick)

  Using a new ticker instance for all the application:

  import { Ticker, InterpolOptions } from "@wbe/interpol"
  
  // disable the default Interpol ticker
  InterpolOptions.disable()
  
  // create a new ticker instance
  const ticker = new Ticker()
  
  // Add manually the raf method to the callback list of the new ticker
  const interpolTick = (t) => {
    InterpolOptions.ticker.raf(e)
  }
  ticker.add(interpolTick, 0)
  
  // Add a new callback to this same ticker instance on rank '1'
  const scrollerTick = (t) => {
    // ....
  }
  ticker.add(scrollerTick, 1)

@wbe/[email protected]

Patch Changes

• 481f5e6: add exports types

  • To export the correct cjs and esm builds, add the exports field in package.json.
  • bump all dependencies to their last version

@wbe/[email protected]

Minor Changes

• 288c914: Fix: seek multiple times on the same progress

  Goal is to test if the onUpdate callback is called when we seek to the same progress value multiple times in a row.

  Use case example :

  Practical example is when we have to playIn a wall and seek it without transition duration to a specific value when the browser is resized. This situation can now be resolve with this dummy code:

  const itp = new Interpol({
    immediateRender: true,
    paused: true,
    el: wall,
    props: {
      x: {
        from: () => -innerWidth * 0.9,
        to: 0,
        unit: "px",
      },
    },
  });
  
  let isVisible = false;
  button?.addEventListener("click", () => {
    isVisible = !isVisible;
    isVisible ? itp.play() : itp.reverse();
  });
  
  window.addEventListener("resize", () => {
    // the position depends on innerWidth, so we have to re computed this prop value
    itp.refreshComputedValues();
    // seek to progress `0`
    itp.seek(0);
    isVisible = false;
  });

  Enregistrement.de.l.ecran.2024-05-09.a.12.19.05.mov

  timeline refreshComputedValues

  Add refreshComputedValues() method on Timeline instance. It will refresh computed values of each adds.

  const tl = new Timeline();
  tl.refreshComputedValues();

@wbe/[email protected]

Minor Changes

• c275500: Refresh computed values before timeline add() starts.

  Goal of this PR is to update an external variable on the first add() onUpdate and reused it as "from" of the second add(). It will work if "from" of the second add() is a computed value. Behind the scene, we re-execute refreshComputedValues() juste before the add() starts.

  let EXTERNAL_X = 0;
  
  tl.add({
    ease: "power3.in",
    props: {
      x: [0, 100],
    },
    onUpdate: ({ x }) => {
      // Mute the external value
      EXTERNAL_X = x;
    },
  });
  tl.add({
    props: {
      // Use the updated external value as computed value
      x: [() => EXTERNAL_X, 50],
    },
    onUpdate: ({ x }) => {
      // x will be interpolated from 100 to 50
    },
  });

  In order to test this new functionality, the full Interpol Instance is now exposed from each Interpol Callbacks. It allows you to access additional properties like props computeds etc.

  tl.add({
    props: {
      x: [0, 100],
    },
    onUpdate: ({ x }, time, progress, instance) => {
      // instance is available
    },
  });