Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <svg class="envelope" width="250" height="250" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1841 44.9054V72.0082C68.1841 74.1455 66.4495 75.8801 64.3123 75.8801H12.6878C10.5505 75.8801 8.81592 74.1455 8.81592 72.0082V44.9054" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="r_line" d="M68.1841 44.9054L38.5 28.9054L8.81592 44.9054" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5593 68.1362L29.4654 57.8113H47.534L60.4402 68.1362" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M67.7042 45.1373L53.6968 54.2303" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.44581 45.0443L23.3033 54.2304" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.8592 50.7893V15.5117H19.1408V50.7893" fill="white"/>
<path class="letter" d="M57.8592 50.7893V15.5117H19.1408V50.7893" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="star" d="M43.1212 42.256C43.8577 42.6597 44.7337 42.0305 44.5863 41.2036L43.7504 36.5155C43.6912 36.1832 43.8036 35.8433 44.0494 35.6119L47.5165 32.3477C48.1281 31.7719 47.8003 30.7443 46.9683 30.629L42.2514 29.9753C41.917 29.929 41.6286 29.717 41.4844 29.4117L39.4513 25.1056C39.0927 24.3461 38.0142 24.3403 37.6474 25.0959L35.5681 29.3799C35.4207 29.6836 35.13 29.8925 34.7951 29.9352L30.0715 30.5381C29.2383 30.6445 28.8995 31.6684 29.5048 32.2507L32.9366 35.5521C33.1799 35.7862 33.2887 36.1272 33.2258 36.4589L32.3395 41.1377C32.1832 41.9629 33.0524 42.6016 33.7932 42.2058L37.9935 39.9622C38.2913 39.8031 38.6492 39.805 38.9453 39.9673L43.1212 42.256Z" fill="white" stroke="#D52B1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class= "line2" d="M62.063 12.2567L68.3825 6.01041" stroke="#CD040B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class= "line3" d="M64.5013 17.292L69.5182 17.3867" stroke="#CD040B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class= "line1" d="M57.0531 9.67342L57.0899 3.35582" stroke="#CD040B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="controls">


              
            
!

CSS

              
                body {
  background-color: #fffff
 margin: 50px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 5em;
  text-align: center;
}


button {
  background: black;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: red;
}

.controls {
  margin-top: 30px;
}
              
            
!

JS

              
                var tl = anime.timeline({
//easing: 'easeOutExpo',
  //duration: 750,
  autoplay: true,
  loop: true
});

tl
.add({
  targets: '.envelope',
  scale:[0, 1],
  opacity: [0, 1],
  easing: 'easeOutExpo',
  translateY: 50, duration: 1000
  

},0)

.add({
  targets: '.r_line',
  transformOrigin: ['50% 50% 0px', '50% 60% 0px'],
  scale:[0, 1],
  easing: 'easeOutExpo',
  duration: 1000
  

},'-=1000')


.add({
  targets: '.letter',
  transformOrigin: ['50% 60% 0px', '50% 70% 0px'],
  scaleY: [0, 1], 
  duration: 1000, 
  easing: 'easeOutExpo',
  //direction: 'alternate',
  
 


},'-=600')

.add({
  targets: '.star',
  transformOrigin: ['50% 30% 0px', '50% 30% 0px'],
  scale: [0,1], 
  duration: 1500, 
  easing: 'easeOutElastic',
  rotate: [180,360],
  //transformOrigin: 'center',
  
 
  //direction: 'alternate',

},'-=600')

.add({
  targets: '.line1',
  transformOrigin: ['50% 50% 0px', '50% 50% 0px'],
  opacity: {
    value:[0, 1],
    delay:50,
  },
  scaleY: [0, 1], 
  duration: 500, 
  //easing: 'easeOutExpo',

},'-=1200')

.add({
  targets: '.line2',
  transformOrigin: ['50% 50% 0px', '50% 50% 0px'],
  opacity: {
    value:[0, 1],
    delay:50,
  },
  scaleY: [0, 1], 
  duration: 500, 
  //easing: 'easeOutExpo',

},'-=1100')

.add({
  targets: '.line3',
  transformOrigin: ['50% 50% 0px', '50% 50% 0px'],
   opacity: {
    value:[0, 1],
    delay:100,
  },
  scaleX: [0, 1], 
  duration: 500, 
  //easing: 'easeOutExpo',

},'-=1000')


.add({
  targets: '.envelope',
  delay:800,
   opacity: [1, 0],
   
    duration: 500, 
  easing: 'easeOutExpo',

},)









              
            
!
999px

Console