Jump to content
GreenSock

Ava

Members
  • Posts

    15
  • Joined

  • Last visited

Posts posted by Ava

  1. Hi,

     

    Does anyone know why I get an unrecoverable syntax error in JSHint?
    Below is a script that I have tweaked. The original version was animated.

     

    $(document).ready(function(){

    $.ajax({
        url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml",
      type: "GET",
        dataType: "xml",
        success: function (xml) {
          
          $(xml).find("Group[name=9]").each(function () {
          var belopp = $(this).find("TextVar[name=summa]").attr("value");
          belopp = belopp.substring(0, belopp.length-3);
          $(".jackpot").html('<h3>Just nu '+belopp+'</h3>');
          });
        }
    });
    });

     

    _________________________________________

     

    The original version

     

     $(document).ready(function(){

    $.ajax({
        url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml",
      type: "GET",
        dataType: "xml",
        success: function (xml) {
          
          $(xml).find("Group[name=9]").each(function () {
          var belopp = $(this).find("TextVar[name=summa]").attr("value");
          belopp = belopp.substring(0, belopp.length-3);
          $(".jackpot").html('<h3>Drömvinsten är just nu <br /> '+belopp+'</h3>');
            
            var txt = $(".txt");
            var txtIndex = -1;
            var playAnimation = 0;
            
            function playAgain() {
            if (playAnimation <= 4) {
              showNextTxt();
            } else {
              ++txtIndex;
              $(".endframe").show();
              $(".jackpot").hide();
            }
          }
        
          function showNextTxt() {
            ++txtIndex;
            ++playAnimation;
            txt.eq(txtIndex % txt.length).fadeIn(200).delay(3000).fadeOut(300, playAgain);
          }
          
          showNextTxt();
          
          });
        }
    });
    });
     

     

     

    Best,

    A

     

  2. Hi Joe_midi,

     

    Thanks a lot for these feedback

     

    Would system2, system3 and system4 fade in together or step by step if I use an array?

     

    .from([hemma2, hemma3, hemma4], 0.1, {autoAlpha: 0, ease: SteppedEase.config(1) })

     

     

    I want the .from tweens to fade in step by step  but want them to fade out together at the same time.

     

    Best,

    Ava

  3. Hi,

     

    How do I  set autoAlpha to many elements at the same time?

     

    I would like to fade out all the (.to ) together.

     

     

    the code is :

     

    tl.from(copy1, 1, {autoAlpha:0,ease:Power4.easeNone})
        .from(hemma1, .1, {delay:0.6,autoAlpha:0,ease:Power0.easeNone})
        .from(hemma2, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
        .from(hemma3, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
        .from(hemma4, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
     
        .from(system1, .1, {delay:0.5,autoAlpha:0,ease:SteppedEase.config(1)})
        .from(system2, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
        .from(system3, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
        .from(system4, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
     
        .to(copy1, .5,{autoAlpha:0,ease:Power2.easeOut})
        .to(hemma1,.5,{autoAlpha:0,ease:Power2.easeOut})
        .to(hemma2,.5,{autoAlpha:0,ease:Power2.easeOut})
        .to(hemma3,.5,{autoAlpha:0,ease:Power2.easeOut})
        .to(hemma4,.5,{autoAlpha:0,ease:Power2.easeOut})
     
        .to(system1,.5,{autoAlpha:0,ease:Power2.easeOut})
        .to(system2,.5,{autoAlpha:0,ease:Power2.easeOut})
        .to(system3,.5,{autoAlpha:0,ease:Power2.easeOut})
        .to(system4,.5,{autoAlpha:0,ease:Power2.easeOut})

     

     

    thanks

     

     

     

  4. Hi again,

     

    Everything that has from tween flashes on screen even though I added these 2 in the JS: TweenMax.set("#banner", {autoAlpha:1}); and
    TweenMax.set("#text3", {autoAlpha:1});

     

    I have also sat visibility:hidden to #banner and #text3.

     

     

    HTML

     

    body{
        background-color:#ffffff;
    }
    #banner {
        visibility:hidden;
        position: relative;
        top: 0px;
        left: 0px;
        width: 160px;
        height: 600px;
        background-color:#ffffff;
        overflow: hidden;
        background-image: url("160x600_bg.png");
    }
    #banner:hover{
        cursor:pointer
    }

    #text1{
        position: absolute;
        top: -600px;
    }
    #text2{
        position: absolute;
        top: -600px;
    }

    #text3{
        visibility:hidden;
        position: absolute;
        top: 0px;

    }

    </style>
    </head>
     

    <body>

     

     

    JS

     

    TweenMax.set("#banner", {autoAlpha:1});
    TweenMax.set("#text3", {autoAlpha:1});

    window.onload = function () {
        var tl = new TimelineMax({repeat:-1});

        loop = 0;
        loopMax = 3;

        var text1 = document.getElementById('text1');
        var text2 = document.getElementById('text2');
        var text3 = document.getElementById('text3');
        
        function loopCheck() {
      console.log("loopCheck")
         loop++;
         if (loop < loopMax) {
            console.log("play again")
            tl.play();
         } else{
           console.log("done")
           tl.pause();
         }
    }
        
    tl.to(text1, 1.2, {top:0,opacity:1,ease:Power4.easeOut})
        .to(text1, 1.2, {delay:1,top:600,ease:Power4.easeIn})
        .to(text1, 0, {top:-600,ease:Power4.easeOut})

        .to(text2, 1.2, {top:0,opacity:1,ease:Power4.easeOut})

        .from(text3, 1, {top:0, opacity:0,scale:0,ease:Bounce.easeOut})
        
        .call(loopCheck)
         
        .to(text3, 0.5, {delay:1.2,opacity:0,scale:0,ease:Power4.easeOut})
        .to(text2, 1.2, {top:600,ease:Power4.easeIn})

    tl.timeScale(1)

    }

  5. Hi Carl,

     

    Thank you so much for this feedback.

     

    I will from now on use TweenMax instead.

     

    If I use TweenMax, should I then use (TweenMax.set("#banner",  {autoAlpha:1});?

     

    Best,

    Ava

  6. Hi, I use these script only.

     

    I would love to use TweenMax instead but my banner size is limited to 40kb or maximum 50kb.

    If I use TweenMax it would add additional bytes to the weight.

     

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>

  7. Hi Jonathan,

     

    Thank you for the feedback.

     

    I use different images to fade in after each other. These are png images. The problem is that when I load this animation the images are visible for a less than a second. It starts to animate later. How do I make the images not to be visible in the beginning?

     

    It only works if i use a polite load. It shouldn't be necessary to use polite load since the animation is not so big.

     

     

    If I add the immediateRender after (.from(x, 1, {alpha:0,ease:Power0.easeNone, immediateRender:false})). The animation doesn't work.

    I'm not using .form and .from in a sequence. I'm not sure how to apply this immediateRender:false to my animation.

     

     

    I want to use code pen but since I'm  using bitmap I'm not sure if it works.

     

    Best,

    Ava

  8. Hi,

     

    I'm new at JS and would appreciate if someone could take a look why this animation doesn't start in the beginning?

    The animation start with a second delay. All images shows a a static image then it disappears and the animation start later.

     

    Best,

    Ava

    window.onload = function(){
        var tl = new TimelineMax({repeat:0});
        
        var Januari = document.getElementById('Januari');
        var Februari = document.getElementById('Februari');
        var Mars = document.getElementById('Mars');
        var April = document.getElementById('April');
        var Maj = document.getElementById('Maj');
        var Juni = document.getElementById('Juni');
        var Juli = document.getElementById('Juli');
        var Augusti = document.getElementById('Augusti');
        var September = document.getElementById('September');
        var End = document.getElementById('End');
        var CTA = document.getElementById('CTA');
        
        
    tl.from(Januari, 1, {alpha:0,ease:Power0.easeNone})
        .to(Januari, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(Februari, 1, {alpha:0,ease:Power0.easeNone})
        .to(Februari, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(Mars, 1, {alpha:0,ease:Power0.easeNone})
        .to(Mars, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(April, 1, {alpha:0,ease:Power0.easeNone})
        .to(April, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(Maj, 1, {alpha:0,ease:Power0.easeNone})
        .to(Maj, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(Juni, 1, {alpha:0,ease:Power0.easeNone})
        .to(Juni, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(Juli, 1, {alpha:0,ease:Power0.easeNone})
        .to(Juli, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(Augusti, 1, {alpha:0,ease:Power0.easeNone})
        .to(Augusti, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(September, 1, {alpha:0,ease:Power0.easeNone})
        .to(September, 1, {alpha:0,ease:Power0.easeNone})
    
        .from(End, 1, {alpha:0,ease:Power2.easeOut})
    
         .to(CTA,.2,{scaleY:1.1,scaleX:1.1})
         .to(CTA,.2,{scaleY:1,scaleX:1})
         .to(CTA,.2,{scaleY:1.1,scaleX:1.1})
         .to(CTA,.2,{scaleY:1,scaleX:1})
          
    tl.timeScale(1);
    }
    
  9. Hi,

     

    I have used this script to animate a loop. The end animation look fine and everything seems to work.

    But when i open the JS file with Adobe Dreameweaver I get many complaints (missing semicolon,
    ’text2’ is not defined, and missing ’used strict’ statement). Do I need to be worried?

     

    Best,

    Ava

     

    window.onload = function () {
        var tl = new TimelineMax({repeat:-1});

        loop = 0;
        loopMax = 3;


         tl.to(text1, 1.2, {top:0,opacity:1,ease:Power4.easeOut})
        .to(text1, 1.2, {delay:.6,top:600,ease:Power4.easeIn})
        .to(text1, 0, {top:-600,ease:Power4.easeOut})

        .to(text2, 1.2, {top:0,opacity:1,ease:Power4.easeOut})

        .from(text3, 1, {top:0, opacity:0,scale:0,ease:Bounce.easeOut})
        .call(loopCheck)
        .to(text3, 0.5, {delay:1.2,opacity:0,scale:0,ease:Power4.easeOut})
        .to(text2, 1.2, {top:600,ease:Power4.easeIn})

    tl.timeScale(1)

    function loopCheck() {
      console.log("loopCheck")
         loop++;
         if (loop < loopMax) {
            console.log("play again")
            tl.play();
         } else{
           console.log("done")
           tl.pause();
         }

    }
    }
     

    post-46218-0-49174000-1472025111_thumb.jpg

×