gsap#TweenLite JavaScript Examples

The following examples show how to use gsap#TweenLite. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AddChartGrid.js    From jira-helper with Apache License 2.0 6 votes vote down vote up 
addManipulationAbilities() {
    const resizer = document.createElement('div');
    resizer.id = `${ResizableDraggableGrid.ids.gridDragResizer}`;
    this.gridDraggable.appendChild(resizer);

    const rect1 = this.gridDraggable.getBoundingClientRect();
    TweenLite.set(resizer, { x: rect1.width, y: 0 });

    const onResize = (x, y) => {
      TweenLite.set(this.gridDraggable, {
        width: x + 0,
        height: rect1.height - y,
      });
      this.renderLines(this.numberArrayBySelectedOption);
    };

    Draggable.create(resizer, {
      bounds: this.gridContainer,
      autoScroll: 1,
      onPress(e) {
        e.stopPropagation();
      },
      onDrag() {
        // "this" points to special gsap object event
        onResize(this.x, this.y);
      },
    });
  }
Example #2
Source File: Option.js    From actions-on-google-pq2-template-sdk with Apache License 2.0 5 votes vote down vote up 
/**
   * Activate the "down" state. Triggers the ripple-effect.
   * @param {SyntheticEvent} [e]
   * @param {boolean} bubble - True to indicate user clicked event.
   */
  activate(
    e = {
      nativeEvent: {
        offsetX: this.root.clientWidth * 0.5,
        offsetY: this.root.clientHeight * 0.5,
        clientX: this.root.getBoundingClientRect().x + this.root.clientWidth * 0.5,
        clientY: this.root.getBoundingClientRect().y + this.root.clientHeight * 0.5,
      },
    },
    bubble = false
  ) {
    this.setState({active: true});
    this.props.dispatch(setOptionActive(this.props.index));

    const {offsetX, offsetY, clientX, clientY} = e.nativeEvent;
    const {clientWidth, clientHeight} = this.root;

    // Calculate max radius the ripple needs to be
    const x = Math.round((offsetX / clientWidth) * 100);
    const y = Math.round((offsetY / clientHeight) * 100);
    const radius = Math.sqrt(
      Math.max(offsetX, Math.abs(clientWidth - offsetX)) ** 2 +
        Math.max(offsetY, Math.abs(clientHeight - offsetY)) ** 2
    );

    // Animate the ripple
    TweenLite.fromTo(
      this.ripple,
      0.64,
      {
        webkitClipPath: `circle(20px at ${x}% ${y}%)`,
        clipPath: `circle(20px at ${x}% ${y}%)`,
      },
      {
        webkitClipPath: `circle(${radius}px at ${x}% ${y}%)`,
        clipPath: `circle(${radius}px at ${x}% ${y}%)`,
        ease: Easing.decelerate,
      }
    );

    TweenLite.to(this.root, 0.2, {
      color: this.props.config.buttonSelectedTextColor,
    });

    /**
     * The onClick callback. The value is the string set in the Option.value
     * parameter. The second object is of shape {x:number; y:number;}, and
     * indicated where on-screen a user has clicked.
     */
    if (bubble === true) {
      this.props.onClick(this.props.value, {
        x: clientX,
        y: clientY,
      });
    }
  }