@wbe/[email protected]

Minor Changes

⚠️ breaking change:

• dd1b869: TL accepts relative and absolute offset

  offset of add({}, offset) should be relative or absolute

  Relative offset (until this PR, offset was a number offset syntaxe)
  The new relative offset should be a string, according to the GSAP API.

  tl.add({}, "+=50")
  tl.add({}, "+50") // same than "+=50"
  tl.add({}, "50") // same than "+=50"
  
  tl.add({}, "-=50")
  tl.add({}, "-50") // same than "-=50"

  Absolute offset is a number. This is the absolute position of the add() in the timeline.

  tl.add({}, 100)
  tl.add({}, 0) // start at the debut of the timeline
  tl.add({}, -100) // add duration - 100

  • adapt examples using relative offset with number
  • create new example with input to set offset manually
  • update readme
  • <{offset} | >{offset}
  • unit tests

@wbe/[email protected]

Patch Changes

• 4a7b054: fix tlDuration if offset is less than previous add duration

@wbe/[email protected]

Minor Changes

• d5079f2: Create a low level DOM API.

  • define a unit for each props in the props array

  new Interpol({
    props: {
      // [from, to, unit]
      top: [-100, 0, "px"],
    },
    onUpdate: ({ top }) => {
      element.style.top = top
    },
  })

  • Add styles, a core helper function to simplify the DOM style manipulation

  import { Interpol, styles } from "@wbe/Interpol"
  
  new Interpol({
    props: {
      x: [-100, 0, "%"],
      opacity: [0, 1],
    },
    onUpdate: ({ x, opacity }) => {
      styles(element, { x, opacity })
  
      // Is Equivalent to:
      // element.style.transform = `translate3d(${x}%, 0px, 0px)`
      // element.style.opacity = opacity
    },
  })

  • Add el property to set the DOM element to animate directly in the Interpol constructor.

  new Interpol({
    el: document.querySelector("div"),
    props: {
      x: [-100, 0, "%"],
      opacity: [0, 1],
    },
  })

@wbe/[email protected]

Minor Changes

• 1d38bab: Improve beforeStart callback:

  • beforeStart get same params than onUpdate and onComplete:

       beforeStart?: (props?: Record<K, number>, time?: number, progress?: number) => void

  • A new properties initUpdate (boolean) as been added on as Interpol instance property. It allows to execute "onUpdate" callback just before beforeStart. Useful in this case, onUpdate will be called once, if the timeline is paused in order to give a position to DOM element.

  New "Menu" example:

  • Test thus new features on a real word example.

@wbe/[email protected]

Patch Changes

• 92b744d:
• Fix timeline first frame exec onUpdate all interpol instances
• Pause the timeline when Timeline.seek method is called
• Pause the Interpol instance when Interpol.seek method is called

@wbe/[email protected]

Patch Changes

• 7060d12: Fix timeline ticker on stop, resume and pause

@wbe/[email protected]

Patch Changes

• a84ba52: Make no-optional callback params

@wbe/[email protected]

Minor Changes

• f6806e5: breaking changes: callbacks return properties without object.

  new Interpol({
    // Old params
    onUpdate: ({ props, time, progress }) => {},
    onComplete: ({ props, time, progress }) => {},
    // New params
    onUpdate: (props, time, progress) => {},
    onComplete: (props, time, progress) => {},
  })
  
  new Timeline({
    // ...
    // new Params
    onUpdate: (time, progress) => {},
    onComplete: (time, progress) => {},
  })

@wbe/[email protected]

Minor Changes

• e291182: Accept ease as "GSAP like" string name.

  "GSAP like" ease functions are available in interpol as string too:

  import { Interpol, Power3 } from "@wbe/interpol"
  
  // as typed string
  new Interpol({
    ease: "power3.out",
  })
  
  // or, import the object
  new Interpol({
    ease: Power3.out,
  })

@wbe/[email protected]

Minor Changes

55af122:

• Interpol have now 'props' properties in order to get multiple interpolation in one single instance. 'from' and 'to' have been removed.

  new Interpol({
    props: {
      x: [0, 100],
      y: [-100, 20],
    },
    onUpdate: ({ props: { x, y }, time, progress }) => {
      // use x and y as needed
    },
  })

  • Change all TimeLine/Interpol protected properties to #private properties
  • Use terser to get smaller minified bundle (w/ mangle properties mode)