biyootiful

Using FFmpeg gifsicle

ffmpeg -i in.mov -pix_fmt rgb8 -r 10 output.gif && gifsicle -O3 output.gif -o output.gif

biyootiful

{
   "name": "audiences",
   "children": [
      {"name": "Audience for men's active pants, shirts, tees, shorts above $75", "value": 51},
      {"name": "Audience for men's sweaters, cardigans, vests with a median price of $65", "value": 50},
      {"name": "Audience for men's boots with a median price of $150", "value": 40},
      {"name": "Audience for men's pants above $300", "value": 18}
    ]
}

biyootiful

{
  "restaurants": [{
    "id": 1,
    "name": "Mission Chinese Food",
    "neighborhood": "Manhattan",
    "photograph": "1.jpg",
    "address": "171 E Broadway, New York, NY 10002",
    "latlng": {
      "lat": 40.713829,
      "lng": -73.989667

biyootiful

{
  "total": 5528,
  "offset": "0",
  "limit": "36",
  "data": [
    {
      "id": "3efb591b1ab4ae385fd1814a210b3438",
      "name": "Abito Donna Tessuto Mini Dress",
      "on_sale": true,
      "price": 189500,

biyootiful

{
  "nodes": [
    {
      "id": "m",
      "group": 1,
      "percent": "70% OFF"
    },
    {
      "id": "n",
      "group": 1,

biyootiful

{
  "title": "Recipe Puppy",
  "version": 0.1,
  "href": "http://www.recipepuppy.com/",
  "results": [
      {
        "title": "Devious Diners Devilishly Delicious Southwest Burger",
        "href":
          "http://www.recipezaar.com/Devious-Diners-Devilishly-Delicious-Southwest-Burger-232118",
        "ingredients":

biyootiful

componentWillMount(){
    this.preloadImg();
  }

...

preloadImg(){
  const imgURLs = imageURLsFromData;

  for(let i = 0; i<imgURLs.length; i++){

biyootiful

//from JSON data
const items = JSONdata.items;
const itemRef = items[currentSlideIndex][currentItem];
const colorRef = itemRef.color;
const urlRef = itemRef.url;

//background image
<div style={{ ..., backgroundImage: `url("${urlRef}"), transition: "background 700ms ease-in"}} />

//background screen (transparent layer with color)

biyootiful

slideLeft(index) {
    const { catWidth } = this.state;
    let slideTo = 0;
    for (let i = 0; i < index; i++) {
      slideTo += catWidth[i] + 40;
    }
    this.setState({
      toLeft: slideTo * -1 + 40,
      currentSlideIndex: index,
      currentItem: 0

biyootiful

renderCategories = categories =>
    categories.map((cat, i) => {
      return (
        <a key={i} style={styles.cursor}
          onClick={() => this.slideLeft(i)}
        >
          <h1 style={styles.catFont} id={"category" + i}>
            {cat}
          </h1>
        </a>