cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <svg class="christmasPuddingSVG" viewBox="0 0 800 600" preserveAspectRatio="xMidYMin meet" xmlns="http://www.w3.org/2000/svg"> 
 <defs>
<mask id="biteMask">
<rect class="vis" x="129.14" y="0" width="839.63" height="531.82" fill="#FFF" />
        <path class="biteMark"/>
        <path class="biteMark" d="M514.52,368.31a86.19,86.19,0,0,0-9.82,3.3A14.57,14.57,0,0,0,478.86,376a22.37,22.37,0,0,0-26,27.75,22.39,22.39,0,0,0-5.22,41.13,14.33,14.33,0,0,0,5.59,24.3c.28,1.25.57,2.51.91,3.76a85.47,85.47,0,1,0,60.43-104.69Z"/>
        <path class="biteMark" d="M458.39,305.27a86.19,86.19,0,0,0-7.38,7.27,14.57,14.57,0,0,0-21.27,15.32,22.37,22.37,0,0,0-11.25,36.36,22.39,22.39,0,0,0,13.34,39.26,14.33,14.33,0,0,0,15.68,19.39c.8,1,1.61,2,2.46,3a85.47,85.47,0,1,0,8.42-120.58Z"/>
        <path class="biteMark" d="M322.15,470.12a86.19,86.19,0,0,0,5.24-8.94,14.57,14.57,0,0,0,16.56-20.32,22.37,22.37,0,0,0,1.4-38,22.39,22.39,0,0,0-23.09-34.44,14.33,14.33,0,0,0-20.19-14.64c-1-.76-2.08-1.52-3.16-2.24a85.47,85.47,0,1,0,23.25,118.62Z"/>
        <path class="biteMark" d="M274.37,388.23a86.19,86.19,0,0,0,10.19-1.91,14.57,14.57,0,0,0,26.2-.82,22.37,22.37,0,0,0,29.63-23.88,22.39,22.39,0,0,0,10.86-40,14.33,14.33,0,0,0-2.18-24.84c-.1-1.28-.22-2.56-.38-3.85a85.47,85.47,0,1,0-74.32,95.32Z"/>
        <path class="biteMark" d="M460.39,281.29a86.19,86.19,0,0,0-.88,10.33,14.57,14.57,0,0,0-6.2,25.47A22.37,22.37,0,0,0,468.43,352a22.39,22.39,0,0,0,35.67,21.15,14.33,14.33,0,0,0,24.53,4.53c1.26.24,2.53.47,3.81.66a85.47,85.47,0,1,0-72-97.06Z"/>
        <path class="biteMark" d="M453.18,443.5a86.19,86.19,0,0,0-7.67-7A14.57,14.57,0,0,0,429,416.13a22.37,22.37,0,0,0-36.92-9.21,22.39,22.39,0,0,0-38.46,15.49,14.33,14.33,0,0,0-18.49,16.73c-1,.85-1.91,1.72-2.84,2.63a85.47,85.47,0,1,0,120.86,1.72Z"/>
        <path class="biteMark" d="M321.84,402.17a86.19,86.19,0,0,0,8.56-5.84,14.57,14.57,0,0,0,23.67-11.27,22.37,22.37,0,0,0,17.57-33.76,22.39,22.39,0,0,0-6.1-41,14.33,14.33,0,0,0-12-21.88c-.61-1.13-1.23-2.26-1.89-3.38a85.47,85.47,0,1,0-29.84,117.13Z"/>
        <path class="biteMark" d="M458.59,293a86.19,86.19,0,0,0-7.67-7,14.57,14.57,0,0,0-16.47-20.39,22.37,22.37,0,0,0-36.92-9.21A22.39,22.39,0,0,0,359.06,272a14.33,14.33,0,0,0-18.49,16.73c-1,.85-1.91,1.72-2.84,2.63A85.47,85.47,0,1,0,458.59,293Z"/>

 </mask>
    
  <circle class="splash" cx="400" cy="326" r="3" fill="#FFFDE7"/>
  <clipPath id="sauceMask">
<path id="sauceStart" d="M462.2,367c1.1,7.4-1.9,12.6-6.6,12.5c-6.9-0.1-4.7-31-13.7-26.6c-6.2,3.1,0.4,16-10,16
  c-14.5,0-0.8-15-18-15c-16.1,0-8.5-10.2-19-10c-12.9,0.3-0.9-14-17-10c-16.1,4-3.9,19.9-18,18c-11.8-1.6-6.5,31-15.7,31.8
  c-3.5,0.3-5.3-2.6-6.1-6.4c-0.1-1.1-0.1-2.3-0.1-3.5c0-26.2,20.2-58.3,62-58.3C441.2,315.7,459.3,347.4,462.2,367z"/>
<rect id="sauceChannel" x="392" width="8" height="339"/>   
   </clipPath>
  </defs>
      <g class="wholeArm">
       <rect class="arm" x="10.59" width="73.29" height="490.36" fill="#ef5350"/>

        <g class="hand">
          <rect x="23.26" y="510.34" width="49.31" height="20.63" fill="#ffbea6"/>
<path class="pincers" d="M47.5,609.36A36.5,36.5,0,1,1,84,572.86a36.5,36.5,0,0,1-36.5,36.5" fill="none" stroke="#ffbea6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22"/>
          <line class="topFinger" x1="115.09" y1="522.92" x2="64.03" y2="536.36" fill="none" stroke="#ffbea6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22"/>
          <line class="botFinger" x1="128.43" y1="563.93" x2="63.21" y2="537.36" fill="none" stroke="#ffbea6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22"/>
        </g>
        <rect class="cuff" x="7.04" y="480.09" width="80.92" height="30.25" rx="6.27" ry="6.27" fill="#fff"/>
      </g> 
 <g mask="url(#biteMask)">
      <g class="wholePudding" >
        <g class="hollyGroup" fill="#66BB6A">
          <path class="hollyR" d="M413.86,292.34c6.8,2.83,17.62-3.07,21.63-11.78,2.17,4,8.09,8.8,14.12,9.62-4.36,6.29-7.15,16-7.3,21.27-4-1.78-9.42-.36-14,2.92a13.3,13.3,0,0,0-11.2,0,.86.86,0,0,0-.13-.13c-1.78-1.48-2.81-2.18-4.83-1.44,1.4-2.61-1.29-6.22-1.44-6.8A40.7,40.7,0,0,0,413.86,292.34Zm23.32,2.57c-1.24.49-19.21,10-19.82,11.94.5.45.94.88.94.88C421.25,304,436,295.66,437.18,294.91Z" />
          <path class="hollyL" d="M393.8,302.27c-.15.58-2.84,4.18-1.44,6.8-2-.74-3.06,0-4.83,1.44a.86.86,0,0,0-.13.13,13.3,13.3,0,0,0-11.2,0c-4.62-3.28-10.09-4.7-14-2.92-.15-5.26-2.94-15-7.3-21.27,6-.82,11.95-5.62,14.12-9.62,4,8.71,14.83,14.6,21.63,11.78A40.7,40.7,0,0,0,393.8,302.27Zm-7.54,1.64s.43-.43.94-.88c-.69-2.44-18-13.15-19.82-11.94C369.71,290.18,385.71,301.72,386.26,303.9Z" />
        </g>
       
        <g class="puddingAndSauceGroup">
          <path class="pudding" d="M475,380.78c0,41.19-33.64,74.69-75,74.69S325,422,325,380.78s33.65-74.69,75-74.69S475,339.59,475,380.78Z" fill="#8D6E63" fill-rule="evenodd"/>
          <path class="sauce" d="M464.22,370c1.1,7.44-1.95,12.62-6.57,12.55-6.93-.09-5.62-12-14.62-7.57-6.2,3.06-.26,33.5-10.65,33.5-14.46,0,.56-32.08-16.61-32.08-16.1,0-12.4,42.6-22.94,42.83-12.94.29-1.17-45.41-17.32-41.43s-3.85-13.84-18-15.77c-11.76-1.61-7,26.91-16.23,27.75-3.5.33-5.32-2.57-6.15-6.37-.06-1.15-.1-2.3-.1-3.46,0-26.18,23.16-64.26,65-64.26C441.18,315.71,461.31,350.39,464.22,370Z" fill="#FFFDE7"/>
          <g class="currantGroup">
                        <circle cx="400" cy="438.07" r="3.5" fill="#FFFDE7"/>
            <circle cx="369.99" cy="419.25" r="3.5" fill="#FFFDE7"/>
            <circle cx="345.71" cy="402.98" r="3.5" fill="#FFFDE7"/>
            <circle cx="425.83" cy="424.94" r="3.5" fill="#FFFDE7"/>
            <circle cx="447.41" cy="413.53" r="3.5" fill="#FFFDE7"/>
          </g>
        </g>
  <g class="splashContainer"/>
       
 <g clip-path="url(#sauceMask)">
 <rect class="saucePour" x="330" width="130" height="390" fill="#FFFDE7"/>  
  </g>       
        <g class="berryGroup">
          <g class="berry">
            <g>
              <circle cx="402.49" cy="304.78" r="9.64" fill="#EF5350"/>
              <path d="M402.49,291.39a13.39,13.39,0,1,0,13.39,13.39A13.4,13.4,0,0,0,402.49,291.39Zm-9.64,13.39a9.64,9.64,0,1,1,9.64,9.64A9.64,9.64,0,0,1,392.85,304.78Z" fill="#FFFDE7"/>
            </g>
            <circle cx="397.93" cy="303.75" r="2.64" fill="#FFFDE7"/>
          </g>
          <g class="berry">
            <g>
              <circle cx="391.26" cy="321.63" r="9.64" fill="#EF5350"/>
              <path d="M391.26,308.24a13.39,13.39,0,1,0,13.39,13.39A13.4,13.4,0,0,0,391.26,308.24Zm-9.64,13.39a9.64,9.64,0,1,1,9.64,9.64A9.64,9.64,0,0,1,381.61,321.63Z" fill="#FFFDE7"/>
            </g>
            <circle cx="386.7" cy="320.6" r="2.64" fill="#FFFDE7"/>
          </g>
          <g class="berry">
            <g>
              <circle cx="414.29" cy="321.63" r="9.64" transform="translate(88.18 732.4) rotate(-89.38)" fill="#EF5350"/>
              <path d="M414.43,308.24a13.39,13.39,0,1,0,13.24,13.53A13.4,13.4,0,0,0,414.43,308.24Zm-9.79,13.28a9.64,9.64,0,1,1,9.54,9.75A9.64,9.64,0,0,1,404.65,321.52Z" fill="#FFFDE7"/>
            </g>
            <circle cx="409.74" cy="320.55" r="2.64" transform="translate(84.76 726.79) rotate(-89.38)" fill="#FFFDE7"/>
          </g>
        </g>
      </g>
  </g>
<g class="wholePudding2">
 <g class="puddingAndSauceGroup2">
          <path class="pudding" d="M475,380.78c0,41.19-33.64,74.69-75,74.69S325,422,325,380.78s33.65-74.69,75-74.69S475,339.59,475,380.78Z" fill="#8D6E63" fill-rule="evenodd"/>

          <g class="currantGroup">
                        <circle cx="400" cy="438.07" r="3.5" fill="#FFFDE7"/>
            <circle cx="369.99" cy="419.25" r="3.5" fill="#FFFDE7"/>
            <circle cx="345.71" cy="402.98" r="3.5" fill="#FFFDE7"/>
            <circle cx="425.83" cy="424.94" r="3.5" fill="#FFFDE7"/>
            <circle cx="447.41" cy="413.53" r="3.5" fill="#FFFDE7"/>
          </g>
        </g>
        </g> 
 </g>
 
<g class="finalBerry">
            <g>
              <circle cx="402.49" cy="304.78" r="9.64" fill="#EF5350"/>
              <path d="M402.49,291.39a13.39,13.39,0,1,0,13.39,13.39A13.4,13.4,0,0,0,402.49,291.39Zm-9.64,13.39a9.64,9.64,0,1,1,9.64,9.64A9.64,9.64,0,0,1,392.85,304.78Z" fill="#FFFDE7"/>
            </g>
            <circle cx="397.93" cy="303.75" r="2.64" fill="#FFFDE7"/>
          </g>
<!-- <rect id="table" x="750" y="456" width="37" height="323"  fill="#9E7B5F"/>
<rect id="table" x="320" y="456" width="37" height="323"  fill="#9E7B5F"/> -->
<rect id="table" x="250" y="456" width="800" height="23" rx="10" ry="10" fill="#B0927A"/>
</svg>
            
          
!
            
              body {
  background-color:#E2E4D9;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{

  width:100%;
  height:100%;
 overflow:hidden;
  visibility:hidden;
  
}


            
          
!
            
              var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    splash = select('.splash'),
    splashContainer = select('.splashContainer'),
    wholePudding = select('.wholePudding'),
    allHolly = selectAll('.hollyGroup path'),
    puddingAndSauceGroup = select('.puddingAndSauceGroup'),
    allBerries = selectAll('.berryGroup .berry'),
    sauceStartPath = "M462.2,367c1.1,7.4-1.9,12.6-6.6,12.5c-6.9-0.1-4.7-31-13.7-26.6c-6.2,3.1,0.4,16-10,16  c-14.5,0-0.8-15-18-15c-16.1,0-8.5-10.2-19-10c-12.9,0.3-0.9-14-17-10c-16.1,4-3.9,19.9-18,18c-11.8-1.6-6.5,31-15.7,31.8  c-3.5,0.3-5.3-2.6-6.1-6.4c-0.1-1.1-0.1-2.3-0.1-3.5c0-26.2,20.2-58.3,62-58.3C441.2,315.7,459.3,347.4,462.2,367z",
    splashArr,
    afterSplashArr,
    numSplash = 30,
    splashCount = 0,
    afterSplashCount = 0,
    wholeArm = select('.wholeArm'),
    pincers = select('.pincers')
    
  

TweenMax.set('svg', {
  visibility: 'visible'
})
TweenMax.set('.biteMark', {
 autoAlpha:0
})
TweenMax.set('.finalBerry', {
 autoAlpha:0,
 transformOrigin:'50% 100%'
})
TweenMax.set(wholeArm, {
 x:355,
 y:-155
})
TweenMax.set(pincers, {
  drawSVG:'20% 80%'
})

TweenMax.set('.wholePudding2', {
 x:600,
 transformOrigin:'50% 100%',
 scale:0
})
TweenMax.set('.puddingAndSauceGroup2', {
 rotation:480,
 transformOrigin:'50% 50%'
 
})

CustomBounce.create('berryBounce', {strength:0.06, squash:5.3, endAtStart:false, squashID:'berrySquash'});
CustomBounce.create('finalBerryBounce', {strength:0.26, squash:1.3, endAtStart:false, squashID:'finalBerrySquash'});
CustomBounce.create('hollyBounce', {strength:0.1, squash:1.3, endAtStart:false, squashID:'hollySquash'});
CustomEase.create("return", "M0,0 C0,0 0.162,1 0.4,1 0.918,1 1,0 1,0");
CustomEase.create("hup", "M0,0 C0.21,0.978 0.78,1 1,1");
CustomEase.create('wobble', 'M0,0 C0.011,0.029 0.017,0.536 0.023,1.022 0.029,1.511 0.035,1.981 0.047,1.952 0.059,1.924 0.065,1.464 0.071,1.022 0.077,0.58 0.083,0.156 0.095,0.183 0.106,0.209 0.112,0.624 0.118,1.02 0.124,1.418 0.13,1.799 0.142,1.773 0.154,1.747 0.16,1.376 0.166,1.02 0.172,0.664 0.178,0.324 0.19,0.348 0.202,0.371 0.208,0.703 0.213,1.018 0.219,1.335 0.225,1.636 0.237,1.613 0.249,1.59 0.255,1.297 0.261,1.018 0.267,0.738 0.273,0.473 0.285,0.494 0.297,0.515 0.303,0.772 0.309,1.016 0.315,1.26 0.32,1.491 0.332,1.471 0.344,1.451 0.35,1.227 0.356,1.014 0.362,0.803 0.368,0.604 0.38,0.622 0.392,0.64 0.398,0.833 0.404,1.014 0.41,1.195 0.416,1.365 0.427,1.348 0.451,1.311 0.451,0.698 0.475,0.731 0.499,0.764 0.499,1.275 0.523,1.243 0.547,1.213 0.547,0.794 0.57,0.822 0.594,0.848 0.594,1.183 0.618,1.157 0.642,1.133 0.642,0.873 0.666,0.894 0.69,0.914 0.69,1.109 0.713,1.09 0.737,1.071 0.737,0.932 0.761,0.947 0.785,0.962 0.785,1.054 0.809,1.041 0.833,1.029 0.833,0.973 0.856,0.982 0.88,0.99 0.88,1.018 0.904,1.01 0.928,1.004 0.928,0.996 0.952,0.998 0.976,1 0.976,1 1,1');
CustomEase.create('sauceEase', 'M0,0 C0.299,0 0.431,0.253 0.572,0.53 0.681,0.745 0.676,1 1,1');

keepBerryOrigin();

var mainTl = new TimelineMax({repeat:-1});
var splashTl = new TimelineMax();
var afterSplashTl = new TimelineMax();

var puddingTl = new TimelineMax();

var hollyTl = new TimelineMax({});
var berryTl = new TimelineMax({});

puddingTl.to('.wholePudding2', 0.6, {
 scale:1,
 ease:Elastic.easeOut
})

 .from(wholePudding, 1, {
 x:302,
 ease:Sine.easeInOut
})
.to('.wholePudding2', 1,{
 x:300,
 ease:Sine.easeInOut
},'-=1')
 .from('.puddingAndSauceGroup', 1, {
 rotation:240,
 transformOrigin:'50% 50%',
 ease:Sine.easeInOut
},'-=1')
.to('.puddingAndSauceGroup2', 1,{
 rotation:240,
 transformOrigin:'50% 50%',

 ease:Sine.easeInOut
},'-=1')

.to([wholePudding,'.wholePudding2'], 0.8, {
  skewX:-6,
  transformOrigin:'50% 100%',
  ease:Sine.easeInOut
},'-=1')
.to([wholePudding,'.wholePudding2'], 2, {
  skewX:0,
  transformOrigin:'50% 100%',
  ease:Elastic.easeOut//'wobble'
},'-=0.2')
.from('.saucePour', 1.6, {
 attr:{
  height:0
 },
 ease:'sauceEase'
})
//.addCallback(function(){}, '-=0.5')
.from('.sauce', 0.1, {
 alpha:0,
 transformOrigin:'50% 10%'
})


.to('.saucePour', 0.8, {
 y:316,
 ease:Power3.easeIn
},'-=0.5')
.from('.sauce', 1, {
 morphSVG:sauceStartPath,
 ease:'sauceEase'
},'-=0.1')
berryTl.staggerFrom(allBerries, 0.7, {
 y:-600,
 ease:'berryBounce'
},0.09)
.staggerTo(allBerries, 0.7, {
 scaleX:1.2,
 scaleY:0.85,
 ease:'berrySquash'
},0.09, '-='+berryTl.duration())
.staggerTo('.biteMark', 0, {
 autoAlpha:1
},0.15,'+=2')
.set('.finalBerry',  {
 autoAlpha:1
})
.to('.finalBerry', 0.6, {
 y:140,
 ease:'finalBerryBounce'
})
.to('.finalBerry', 0.6, {
 scaleX:1.2,
 scaleY:0.8,
 ease:'finalBerrySquash'
},'-=0.6')
.from(wholeArm, 0.91, {
 y:-650,
 ease:Elastic.easeOut.config(0.4,0.7)
},'+=0.6')
.to(pincers, 0.6, {
 drawSVG:'10% 90%',
 ease:Elastic.easeOut.config(0.7,0.7)
},'-=0.3')
.staggerTo(['.topFinger','.botFinger'], 0.6,{
 rotation:16,
 cycle:{
 transformOrigin:['0% 100%','0% 0%'],
  ease:Elastic.easeOut.config(0.7,0.7)
 }
},0,'-=0.6')
.to('.finalBerry', 0.18, {
 scaleX:0.8,
 ease:Elastic.easeOut.config(0.7,0.7)
},'-=0.5')
.to([wholeArm, '.finalBerry'], 0.5, {
 y:'-=700',
 ease:Back.easeIn.config(0.3)
},'+=0')
.staggerTo(['.topFinger','.botFinger'], 0.6,{
 rotation:'+=36',
 cycle:{
 transformOrigin:['0% 100%','0% 0%'],
  ease:Expo.easeIn
 }
},0,'-=0.3')
.to({}, 1,{
 
})



hollyTl.staggerFrom(allHolly, 0.6, {
 y:-600,
 ease:'hollyBounce'
},0.09)

.staggerTo(allHolly, 0.6, {
 cycle:{
  rotation:[-9,13]
 },
 ease:'return'
},0.1,'-=0.4')




function keepBerryOrigin(){
 
 TweenMax.set(allBerries, {
  transformOrigin:'50% 100%'
 }) 
 TweenMax.staggerTo(allHolly, 0,{
  cycle:{
   transformOrigin:['0% 100%', '100% 100%']
  }
 })
}

function makeSplashes(){
 
 splashArr = [];
 afterSplashArr = [];
 
 //main splash
 for(var i =0; i < numSplash; i++){
  var s = splash.cloneNode(true);
  splashContainer.appendChild(s);
  splashArr.push(s);
 }
 //after splash
 for(var i =0; i < numSplash; i++){
  var s = splash.cloneNode(true);
  splashContainer.appendChild(s);
  afterSplashArr.push(s);
 }
 
  TweenMax.staggerTo([splashArr, afterSplashArr],0, {
   transformOrigin: '50% 50%',
   cycle:{
    scale:function(){
     
     return randomBetween(10, 60)/10
    }
   },
   alpha:0
  }); 
 
}

function createSplash(){
 var i = numSplash;
 
 //main splash
 while (--i > -1) {
  var p = splashArr[i];
  var tl = new TimelineMax();
  tl.to(p, randomBetween(1, 16) / 10, {
    physics2D: {
     velocity: randomBetween(190, 280),
     angle: randomBetween(-180, -5),
     gravity: randomBetween(200, 980)
    },
    scale: 0,
    alpha: 1
   })
  .to(p, 0.1, {
   fill:'#FFFDE7',
   alpha:1,
   ease:Power0.easeNone
  },'-=' + tl.duration());
  
  var ap = afterSplashArr[i];
  var aTl = new TimelineMax();
  aTl.to(ap, randomBetween(1, 16) / 10, {
    physics2D: {
     velocity: randomBetween(290, 320),
     angle: randomBetween(-140, -45),
     gravity: randomBetween(620, 780)
    },
    scale: 0,
    alpha: 1
   })
  .to(ap, 0.1, {
   fill:'#FFFDE7',
   alpha:1,
   ease:Power0.easeNone
  },'-=' + aTl.duration());
  

  splashTl.add(tl, 0);
  afterSplashTl.add(aTl, i/65);

  splashCount++;
  afterSplashCount++;

  splashCount = (splashCount >= numSplash) ? 0 : splashCount;
  afterSplashCount = (afterSplashCount >= numSplash) ? 0 : afterSplashCount;
  
  //after splash
  
  
 } 
 
 afterSplashTl.seek(0);
 splashTl.seek(0);

}

function randomBetween(min, max) {
 return Math.floor(Math.random() * (max - min + 1) + min);
}


makeSplashes();
createSplash();

mainTl.add(puddingTl, 0);
mainTl.add(splashTl, 4.5);
mainTl.add(afterSplashTl, 5.4);
mainTl.add(berryTl, 5.1);
mainTl.add(hollyTl, 5.6);
TweenMax.globalTimeScale(1.13);
//ScrubGSAPTimeline(mainTl)
            
          
!
999px
Loading ..................

Console