Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .checkbox-holder{style: "width: 200px; margin: 5px auto;"}
  %label{style: "display: inline-block; margin-right: 5px", for: "lock-axis"} Lock drag axis
  %input.text-option{id: "lock-axis", type: "checkbox", name: "rtl"}
#stage-wrapper{:style => "width: 540px; height: 574px; transform: translate3d(-48px, 50px, 0px); z-index: 1009;"}
  .top{:style => "cursor: move; touch-action: none; user-select: text;"}
    .row.top-row
      .stage-header
  #stage-container{:height => "1080", :style => "width: 1080px; height: 1080px; transform-origin: left top 0px; transform: matrix(0.5, 0, 0, 0.5, 0, 0); background-color: rgb(255, 255, 255);", :width => "1080"}
    #stage{:height => "1080", :style => "width: 1080px; height: 1080px;", :width => "1080"}
      %video#vid1{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/CloudsMountainSkySunnyScenic.mp4", width: "1920px", height: "1080px", loop: ""}
      %svg#stage-master{:height => "1080", :version => "2", :viewbox => "0 0 1080 1080", :width => "1080", :x => "0", :xmlns => "http://www.w3.org/2000/svg", :y => "0"}
        :css

    #video-resizer{style: "border: 1px dashed gray; width: 1920px; height: 1080px;"}
      .ui-resizable-handle.ui-resizable-ne{id: "ne", "data-clickable": "true"}
      .ui-resizable-handle.ui-resizable-se{id: "se", "data-clickable": "true"}
      .ui-resizable-handle.ui-resizable-sw{id: "sw", "data-clickable": "true"}
      .ui-resizable-handle.ui-resizable-nw{id: "nw", "data-clickable": "true"}
              
            
!

CSS

              
                // https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/bebas.ttf
@font-face
  font-family: 'Bebas Neue Bold' 
  font-style: normal
  font-weight: normal
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/bebas.ttf') format('truetype')
svg.stage-svg
  position: absolute
  left: 0
  top: 0
  pointer-events: none
  .svg-wrapper
    pointer-events: fill

#stage-wrapper
  margin: 5px auto 15px
  clear: both
  position: absolute
  box-shadow: 0px 23px 49px 1px rgba(0,0,0,0.2)
  background: #ffffff
  border-top-left-radius: 4px
  border-top-right-radius: 4px
  top: auto
  left: -50%
  right: -50%
  // overflow: hidden
  > .top
    height: 34px
    background: #efefef
    border-top-left-radius: 4px
    border-top-right-radius: 4px
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4)
    z-index: 10
    position: relative
    .stage-header
      width: 100px
      margin: 0 auto
      text-align: center
      h4 span
        font-size: 14px
        color: rgba(97, 97, 97, 0.4)
        background-color: #efefef
        text-shadow: white 1px 1px 0px
        padding: 0
        &.wd
          padding-left: 2px
        &.by
          font-size: 10px
          padding: 0 1px
    .top-row
      padding-top: 4px
    .zoomed-notice
      display: none
      color: #1c75bc
    input
      &[name=cwidth], &[name=cheight]
        display: inline-block
        max-width: 60px
        text-align: center
        height: 26px
        margin: 0 0 0 5px
        padding: 3px 0
        font-size: 14px
        vertical-align: middle
        color: #777
      &[name=cwidth]
        margin-right: 8px
        &.no-right-margin
          margin-right: 0
    select#zoom-level
      width: 60px
      margin: 0 0 0 6px
      display: block
      float: right
      height: 26px
      padding: 5px 24px 4px 7px
      font-size: 14px
      color: #777
    .zoom-settings
      position: absolute
      right: 10px
      top: 4px
    label
      color: #888
      text-transform: none
      display: inline-block
      padding: 0
      line-height: 1.0em
      &#zoom-label
        display: inline-block
        text-align: right
        margin: 5px -2px 0 0
        width: 16px
        img
          opacity: 0.2

#stage-wrapper
  .top
    h4
      font-size: 14px
      font-weight: bold
      padding-top: 5px
      color: rgba(97, 97, 97, 0.4)
      background-color: #efefef
      text-shadow: rgb(255, 255, 255) 1px 1px 0px



video
  position: absolute
  top: 0
  left: 0

#stage-container
  position: relative
  width: 800px
  height: 600px
  margin: 0
  // background: #ffffff
  z-index: 9
  border-bottom-left-radius: 4px
  border-bottom-right-radius: 4px
  video
    // opacity: 0
    z-index: -1

#stage
  width: 800px
  height: 600px
  overflow: hidden
  position: relative
  background: transparent
  position: relative
  font-family: sans-serif
  img.trans
    opacity: 0
    position: absolute
  .svg.inline path
    animation-fill-mode: forwards
    fill-rule: evenodd

#stage g.top
  z-index: 1000

h1, h2, h3, h4, h5, div, p
  font-family: 'Bebas Neue Bold'
  -webkit-font-smoothing: antialiased
  color: #ffffff
  text-rendering: auto

#stage-master
  position: absolute
  margin: 0
  background-size: cover
  background-blend-mode: darken
  background-repeat: no-repeat
  background-position: center center
  transition: 3s
  background: rgba(0,0,0,0)
  img#hand
    opacity: 1
  foreignObject, .type-container
    pointer-events: none
  foreignObject .type-container .img-wrapper
    pointer-events: bounding-box
  foreignObject.backgrounds
    div.bg-image
      width: 100%
      background-size: cover
      background-repeat: no-repeat
      background-position: center center
#video-resizer
  position: absolute
  top: 0
  left: 0
  z-index: 10000
  cursor: move

.ui-resizable-handle
  background-color: rgba(0,0,0,.75)
  width: 12px
  height: 12px

.ui-resizable-se
  bottom: -5px
  right: -5px
              
            
!

JS

              
                var companions, startX, startY, vid1 = $('video#vid1');
vid1[0].play();
var set_position = function(width, height){
  $('.ui-resizable-n').css('left', (width/2-6)+'px');
  $('.ui-resizable-e').css('top', (height/2-6)+'px');
  $('.ui-resizable-s').css('left', (width/2-6)+'px');
  $('.ui-resizable-w').css('top', (height/2-6)+'px');
};

var D = $( "#video-resizer" ).resizable({ 
  aspectRatio: true,
  handles: {
    'ne': '.ui-resizable-ne',
    'se': '.ui-resizable-se',
    'sw': '.ui-resizable-sw',
    'nw': '.ui-resizable-nw'
  },
  grid: [ 2, 2 ],
  create: function( event, ui ) {
    var width = $(event.target).width();
    var height = $(event.target).height();
    set_position(width, height);
  },
  resize: function(event, ui){
    var width = $(event.target).width();
    var height = $(event.target).height();
    set_position(width, height);
    TweenLite.set(vid1,{left: ui.position.left, top: ui.position.top, width: ui.size.width, height: ui.size.height});
  }
});

TweenLite.set("#video-resizer", {x:"+=0"}); //just to ensure that _gsTransform is created for each element. That's where the transforms are stored, like x and y.
TweenLite.set("video#vid1", {x:"+=0"});

Draggable.create("#video-resizer", {
  lockAxis: false,
  onPress:function() {
    companions = [];
    startX = this.x;
    startY = this.y;
    var vid = $('video#vid1');
    companions.push({element: vid, x:vid[0]._gsTransform.x, y:vid[0]._gsTransform.y});
    TweenLite.killTweensOf("video");
  },
  onDrag:updateCompanions,
  onThrowUpdate:updateCompanions,
  throwProps:true
});


function updateCompanions() {
  var i = companions.length,
      deltaX = this.x - startX,
      deltaY = this.y - startY,
      companion;
  while (--i > -1) {
    companion = companions[i];
    TweenLite.set(companion.element, {x:companion.x + deltaX, y:companion.y + deltaY});
  }
}

$('#lock-axis').on("change", function(){
  if( $(this).prop("checked") ) {
    Draggable.get(D).lockAxis = true;
  } else {
    Draggable.get(D).lockAxis = false;
  }
});
              
            
!
999px

Console