Jump to content
Search Community

code21

Members

  • Posts

    5

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

code21's Achievements

0

Reputation

  1. code21
    Thanks Ohem and davi. Davi I used the trick you mentioned and it works fine, but if I set it to repeat 3 times only then the animation will stop at the empty white screen Ohem , I am using your code but haven't had luck, I might be messing how I am calling the function heres the my code below: I have highlighted the function code that I have used , Greatly appreciate your help on this . <!doctype html> <html> <head> <meta charset="utf-8"> <style> div{ position:absolute; left:0px; top:0px; } img{ position:absolute; left:0px; top:0px; } #banner{ width:300px; height:250px; overflow:hidden; background-color:#ffffff; cursor:pointer; visibility:hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #AAAAAA; } .board{ opacity:0.5; } .inv{ visibility:hidden; } #Spec{ position:absolute; z-index: 9; padding-top:28px; } #GRY_objective, #GRY_risk, #GRY_personalized{ position: absolute; left:300px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> var clickTag = "#"; var loadCount = 7; var loaded = 0; var ctaActive = false; function init(){ console.log("init()"); var i =0 var tl= new TimelineMax({onComplete:stayLit, repeatDelay:0.10, ease:Power3.easeInOut}) tl.to(banner, 0.5, {autoAlpha:1}); tl.to(Meet_digital, 0, {autoAlpha:1},"+=.5"); tl.to(Meet_digital, 2, { left:-300, ease:Power2.easeInOut},"+=1"); tl.to(Spec, 0, {autoAlpha:1}) .to(Spec, 2, {top:-30, ease:Power2.easeOut},"Meet_digital+=.25"); tl.to(GRY_objective, 0, {autoAlpha:1}) .to(GRY_objective, 2,{left:0, ease:Power3.easeInOut},"+=.9") .to(GRY_objective, 2,{left:-300, ease:Power3.easeInOut,},"+=2.1") .to(GRY_risk, 2,{autoAlpha:1, left:0, ease:Power3.easeInOut,},"GRY_objective-=6.1") .to(GRY_risk, 2,{left:-300, ease:Power3.easeInOut,},"GRY_objective-=2"); tl.to(GRY_personalized, 0, {autoAlpha:1},"-=.5"); tl.to(GRY_personalized,2, {left:0, ease:Power3.easeInOut},"+=1.5"); tl.to(cta, 2, {autoAlpha:1, delay:1}); setTimeout(ctaOn, 1 * 1000); tl.to(banner, 1, {autoAlpha:0},"+=1"); function stayLit() { i++; if(i=-1) { TweenMax.to("#banner, 1", {autoAplha:0, onComplete: function(){tl.restart()}}); } function loadCheck(id){ loaded ++; console.log(loaded, loadCount, id); if(loaded == loadCount){ init(); } } function ctaOn(){ ctaActive = true; } function hit(){ window.open(clickTag); } function over(){ console.log("over()"); if(ctaActive){ TweenMax.to(cta, 0.25, {autoAlpha:0.85}); } } function out(){ console.log("out()"); if(ctaActive){ TweenMax.to(cta, 0.25, {autoAlpha:1}); } } </script> </head> <body> <div id="banner" onClick="hit()" onMouseOver="over()" onMouseLeave="out()"> <img id="pic" src="angle.png" onload="loadCheck('angle')" style="z-index:10"> <img id="Meet_digital" src="Meet_digital.png" onload="loadCheck('angle')"> <img id="cta" src="cta.png" onload="loadCheck('cta')"> <img id="SpeciFi" src="SpeciFi.png" onload="loadCheck('SpeciFi')"> <img id="GRY_objective" class="inv" src="GRY_objective.png" onload="loadCheck('GRY_objective')"> <img id="GRY_risk" class="inv" src="GRY_risk.png" onload="loadCheck('GRY_objective')"> <img id="GRY_personalized" class="inv" src="GRY_personalized.png" onload="loadCheck('GRY_personalized')"> <!-- <img src="board04.png" class="board"> --> </div>
  2. code21
    Thanks Davi, would it be possible for u to look at the code I have and tell me how I can change it , would be of great help if you show me how to change how to add more tween to fade each one back to zero alpha.opacity before looping <!doctype html> <html> <head> <meta charset="utf-8"> <style> div{ position:absolute; left:0px; top:0px; } img{ position:absolute; left:0px; top:0px; } #banner{ width:300px; height:600px; overflow:hidden; background-color:#ffffff; cursor:pointer; visibility:hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #AAAAAA; } .board{ opacity:0.5; } .inv{ visibility:hidden; } #SpeciFi{ position:absolute; padding-top:60px; z-index: 9; } #GRY_objective, #GRY_risk, #GRY_personalized{ position: absolute; left:300px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> var clickTag = "#"; var loadCount = 7; var loaded = 0; var ctaActive = false; function init(){ console.log("init()"); var tl= new TimelineMax({repeat:3, repeatDelay:0.10, ease:Power3.easeInOut}) tl.to(banner, 0.5, {autoAlpha:1}); tl.to(GRY_Meet, 2, {autoAlpha:1}); tl.to(GRY_Meet, 1.5, {left:-300, ease:Power2.easeInOut}); tl.to(SpeciFi, 0.5, {autoAlpha:1, ease:Power1.easeIn}); tl.to(GRY_objective, 1, {autoAlpha:1}) tl.to(GRY_objective, 2,{left:0, ease:Power3.easeInOut},"GRY_objective") tl.to(GRY_objective, 2,{left:-300, opacity:0, ease:Power3.easeInOut},"+=3.1") .to(GRY_risk, 2,{ autoAlpha:1, left:0, ease:Power3.easeInOut},"GRY_objective+=1.2") .to(GRY_risk, 2,{left:-300, opacity:0, ease:Power3.easeInOut,},"-=2"); tl.to(GRY_personalized, 0, {autoAlpha:1},"-=0"); tl.to(GRY_personalized, 2, {left:0, ease:Power3.easeInOut}); tl.to(cta, 3, {autoAlpha:1}); setTimeout(ctaOn, del * 1000); } function loadCheck(id){ loaded ++; console.log(loaded, loadCount, id); if(loaded == loadCount){ init(); } } function ctaOn(){ ctaActive = true; } function hit(){ window.open(clickTag); } function over(){ console.log("over()"); if(ctaActive){ tl.to(cta, 0.25, {autoAlpha:0.85}); } } function out(){ console.log("out()"); if(ctaActive){ tl.to(cta, 0.25, {autoAlpha:1}); } } </script> </head> <body> <div id="banner" onClick="hit()" onMouseOver="over()" onMouseLeave="out()"> <img id="pic" src="angle.png" onload="loadCheck('angle')" style="z-index:10"> <img id="cta" src="cta.png" onload="loadCheck('cta')"> <img id="GRY_Meet" src="GRY_Meet.png" onload="loadCheck('GRY_Meet')"> <img id="SpeciFi" class="inv" src="SpeciFi.png" onload="loadCheck('SpeciFi')"> <img id="GRY_objective" class="inv" src="GRY_objective.png" onload="loadCheck('GRY_objective')"> <img id="GRY_risk" class="inv" src="GRY_risk.png" onload="loadCheck('GRY_risk')"> <img id="GRY_personalized" class="inv" src="GRY_personalized.png" onload="loadCheck('GRY_personalized')"> </div> </body> </html>
  3. code21
    Thank you this helped as well as the video , I was able to make it repeat but its flickering rather than smooth transition . var tl= new TimelineMax({repeat:3, repeatDelay:0.30,})
  4. code21
    I am trying to loop entire animation , any thoughts or example how I can achieve it <!doctype html> <html> <head> <meta charset="utf-8"> <style> div{ position:absolute; left:0px; top:0px; } img{ position:absolute; left:0px; top:0px; } #banner{ width:160px; height:600px; overflow:hidden; background-color:#f4f4f4; cursor:pointer; visibility:hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #AAAAAA; } .board{ opacity:0.5; } .inv{ visibility:hidden; } #logo{ position:absolute; left:100%; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> var clickTag = "#"; var loadCount = 6; var loaded = 0; var ctaActive = false; function init(){ console.log("init()"); TweenMax.to(banner, 0.5, {autoAlpha:1}); var dur = 3; var del = 1; dur = 0.5; TweenMax.to(copyA, dur, {autoAlpha:1, delay:del}); del += 0.6; TweenMax.to(copyB, dur, {autoAlpha:1, delay:del}); del += 0.6; TweenMax.to(copyC, dur, {autoAlpha:1, delay:del}); del += 1.0; dur = 0.8; TweenMax.to(cta, dur, {autoAlpha:1, delay:del}); del += dur; dur = 1.2; TweenMax.to(logo, 0, {autoAlpha:1, delay:del}); TweenMax.to(logo, dur, {left:-325, delay:del, ease:Power2.easeOut}); setTimeout(ctaOn, del * 1000); } function loadCheck(id){ loaded ++; console.log(loaded, loadCount, id); if(loaded == loadCount){ init(); } } function ctaOn(){ ctaActive = true; } function hit(){ window.open(clickTag); } function over(){ console.log("over()"); if(ctaActive){ TweenMax.to(cta, 0.25, {autoAlpha:0.85}); } } function out(){ console.log("out()"); if(ctaActive){ TweenMax.to(cta, 0.25, {autoAlpha:1}); } } </script> </head> <body> <div id="banner" onClick="hit()" onMouseOver="over()" onMouseLeave="out()"> <img id="pic" src="pic.png" onload="loadCheck('pic')"> <img id="copyA" class="inv" src="copyA.png" onload="loadCheck('copyA')"> <img id="copyB" class="inv" src="copyB.png" onload="loadCheck('copyB')"> <img id="copyC" class="inv" src="copyC.png" onload="loadCheck('copyC')"> <img id="logo" class="inv" src="logo.png" onload="loadCheck('logo')"> <img id="cta" class="inv" src="cta.png" onload="loadCheck('cta')"> <!-- <img src="board04.png" class="board"> --> </div> </body> </html>
×
×
  • Create New...