Ava

April 6, 2017

Hi,

I understand.

Thanks

April 6, 2017

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

November 2, 2016

thank you Carl

this was helpful

November 1, 2016

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

October 28, 2016

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

October 25, 2016

Hi,

Thanks for all these feedback.
This helped solving the problem.

Best,

Ava

October 19, 2016

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)

}

October 19, 2016

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

October 18, 2016

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.

October 17, 2016

Thank you so much. Great advice.

I will have a serious look at codePen. But in this case it seems like this problem appears only when I upload it to adform.

It works fine when I run it locally.

http://livepreview.adform.com/?tag=6649564&e=0&positioning=1%3Dx%3A0%2Cy%3A0%2Cs%3Afalse

October 17, 2016

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

October 17, 2016

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);
}

October 8, 2016

Hi,

Thank you WarenGonzaga for your feedback.

This was really helpful.

Best,

Ava

September 9, 2016

Hi,

Thanks for your feedback. I really appreciate it a lot.

Best,

Ava

August 24, 2016

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

Notifications

Messages

Ava

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Ava

Unrecoverable syntax error

Unrecoverable syntax error

autoAlpha to many elements

autoAlpha to many elements

autoAlpha to many elements

delay in animation

delay in animation

delay in animation

delay in animation

delay in animation

delay in animation

delay in animation

Error in Dreamweaver

Error in Dreamweaver

Error in Dreamweaver