Please enable JavaScript.

Coggle requires JavaScript to display documents.

GSAP - Coggle Diagram

- - - - An Array of objects with x,y coordinates
      - An SVG <path> element
      - An Array of objects defining other properties
    - - getRelativePosition()
      - convertToPath()
  - - - liveSnap
        
        the Draggable should snap WHILE dragging
        
        Inertia
        
        InertiaPlugin.getVelocity(this.target, "x")
    - - If you want a particular element to be “clickable”, thus ignored by Draggable, simply add a data-clickable="true" attribute to it, or an onclick.
- - - - the default position is "+=0"
        which just means "at the end"
      - setting postion
        
        Relative to a label ("someLabel+=1")
        
        Relative to the end of a timeline allowing for gaps
        ("+=1" - insert 1 second after end of timeline) or overlaps ("-=1")
        
        Relative to the previously added tween ("<" references the most recently-added animation's START time while ">" references the most recently-added animation's END time)
        
        At a label
        
        tweens are inserted at and
        relative to a label's position
        
        //tweens are inserted at and relative to a label's position var tl = gsap.timeline(); tl.to("#green", {duration: 1, x: 750})
        //add blueGreenSpin label 1 second after end of timeline .add("blueGreenSpin", "+=1")
        //add tween at blueGreenSpin label
        .to("#blue", {duration: 2, x: 750, rotation: 360}, "blueGreenSpin")
        //insert tween 0.5 seconds after blueGreenSpin label .to("#orange", {duration: 2, x: 750, rotation: 360}, "blueGreenSpin+=0.5");
        
        At an absolute time (1)