Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Ava

Members
  • Content Count

    15
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Ava

  • Rank
    Member

Recent Profile Visitors

1,285 profile views
  1. Ava

    Unrecoverable syntax error

    Hi, I understand. Thanks
  2. 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
  3. Ava

    autoAlpha to many elements

    thank you Carl this was helpful
  4. Ava

    autoAlpha to many elements

    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
  5. 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
  6. Ava

    delay in animation

    Hi, Thanks for all these feedback. This helped solving the problem. Best, Ava
  7. Ava

    delay in animation

    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) }
  8. Ava

    delay in animation

    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
  9. Ava

    delay in animation

    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>
  10. Ava

    delay in animation

    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
  11. Ava

    delay in animation

    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
  12. Ava

    delay in animation

    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); }
  13. Hi, Thank you WarenGonzaga for your feedback. This was really helpful. Best, Ava
  14. Hi, Thanks for your feedback. I really appreciate it a lot. Best, Ava
  15. 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(); } } }
×