使用GSAP SVG制作的办公室盆景植物动画

HTML5 GSAP SVG Plants

h5, svg, plant

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3292
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const potsTimeline = [...document.querySelectorAll('.pot')].map((pot, i) => {
  const timeline = new TimelineMax();

timeline.from(
    pot,
    POTS_TIMES[i].duration,
    {
      delay: POTS_TIMES[i].delay,
      y: -POT_BOTTOM_Y,
    }
  );

return timeline;
});
const shadowsTimeline = [...document.querySelectorAll('.pot-shadow')].map((shadow, i) => {
  const timeline = new TimelineMax();

timeline.from(
    shadow,
    POTS_TIMES[i].duration,
    {
      ease: Power0.easeInOut,
      delay: POTS_TIMES[i].delay,
      scale: 0,
      transformOrigin: 'center center',
    }
  );

return timeline;
});
const leafsTimeline = [...document.querySelectorAll('.leaf')].map(leaf => {
  const isBack = leaf.classList.contains('leaf-back');

const timeline = new TimelineMax();

timeline.from(
    leaf,
    0.5 + Math.random() * 0.8,
    {
      delay: isBack ? 0.5 : 0,
      ease: Back.easeOut.config(0.5 + Math.random()),
      scale: 0,
      yPercent: 10 * Math.random(),
      transformOrigin: 'center bottom',
    }
  );

return timeline;
});
const flowersTimeline = [...document.querySelectorAll('.flower')].map(flower => {
  const isLeft = flower.classList.contains('flower-left');

const timeline = new TimelineMax();

timeline.from(
    flower,
    1 + Math.random() * 1,
    {
      ease: Circ.easeOut,
      scale: 0,
      transformOrigin: isLeft ? 'right bottom' : 'left bottom',
    }
  );

return timeline;
});

masterTimeline
  .to('.replay-text', 0, { opacity: 0 })
  .add(potsTimeline, 0)
  .add(shadowsTimeline, 0)
  .add(leafsTimeline)
  .add(flowersTimeline)
  .to('.replay-text', .5, { opacity: 1 })
;

document.body.addEventListener('click', () => {
  if (!masterTimeline.isActive()) {
    masterTimeline.restart();
  }
});

编译

CSS

body {
    margin: 0;
    padding: 0;
    cursor: default;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #b6c6d3;
}
svg {
    height: 99vh;
    max-height: 100vw;
}
.no-fill,
.cactus-prickle {
    fill: none;
}
.replay-text {
    fill: #ffffff;
    font-size: 24px;
    font-family: Helvetica, sans, monospace, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.back {
    fill: #b8c6d1;
}
.pot {
    fill: #e3e5e1;
}
.pot-lighter {
    fill: #edeeeb;
}
.pot-lightest {
    fill: #f6f6f4;
}
.pot-top-lightest {
    fill: #fff;
}
.pot-top-soil {
    fill: #afb4a6;
}
.pot-shadow {
    fill: #a1b4bd;
}
.haworthia {
    -webkit-clip-path: url(#haworthia-clip-path);
    clip-path: url(#haworthia-clip-path);
    fill: #7ea981;
}
.haworthia-strip {
    fill: #c7e5ce;
}
.haworthia-ouline {
    fill: #709c74;
    opacity: 0.5;
}
.cactus {
    -webkit-clip-path: url(#cactus-clip-path);
    clip-path: url(#cactus-clip-path);
    fill: #5b9a7c;
}
.cactus-lighter {
    fill: #63a689;
}
.cactus-lightest {
    fill: #6fb293;
}
.cactus-prickle {
    stroke: #4c8165;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}
.flower-root {
    fill: #71d1a8;
}
.flower-lighter {
    fill: #efad96;
}
.flower {
    fill: #e19680;
}
.flower-back {
    fill: #d38570;
}
.echeveria {
    -webkit-clip-path: url(#echeveria-clip-path);
    clip-path: url(#echeveria-clip-path);
    fill: #78b1b5;
}
.echeveria-darker {
    fill: #6ea8a8;
}
.echeveria-lighter {
    fill: #88bfbf;
}

HTML

<text x="436" y="700" text-anchor="middle" class="replay-text">Click anywhere to replay</text>

HTML5 GSAP SVG Plants

h5, svg, plant

编辑器支持Emmet

快捷键

HTML5 GSAP SVG Plants

h5, svg, plant

使用Pixi.js和GSAP制作带悬停消除效果的粒子动画

使用Vue和GSAP实现的柱状图动画图表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：