Ava
-
Posts
15 -
Joined
-
Last visited
Recent Profile Visitors
1,674 profile views
Ava's Achievements
1
Reputation
-
Hi, I understand. Thanks
-
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
-
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
-
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
-
Hi, Thanks for all these feedback. This helped solving the problem. Best, Ava
-
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) }
-
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
-
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>
-
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
-
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
-
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); }
-
Hi, Thank you WarenGonzaga for your feedback. This was really helpful. Best, Ava
-
Hi, Thanks for your feedback. I really appreciate it a lot. Best, Ava
-
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(); } } }
