Jump to content
Search Community

Ronen

Members

  • Posts

    2

  • Joined

  • Last visited

About Ronen

  • Birthday May 14

Profile Information

  • Location
    Sydney

Ronen's Achievements

0

Reputation

  1. Ronen
    Hey Guys, Thanks for the swift responses. The flicking image thing Carl mentioned is another issue, related to me not pre-loading the images. My main concern is that first tween (or lack thereof). To show this, if you click on the Black bash first, the image that it replaces it with is already loaded (it's the default one). The first time you click it, nothing seems to happen, it doesn't do the tween, but switches the image for itself, so no difference there. The second click gets the desired effect, where the black ring fades out, and is replaced with a black ring (the same image, removing the chance of the img loading issue). I did try out alerting, and I got pop-ups at each expected stage, but tween didn't perform... strange. I'll test it with console.log() to verify that it wasn't breaking because of a pop-up or something... I'll take a look at getting a codepen example running if you think it will assist, not sure how, but google is my friend there EDIT: Google showed me how amazing and easy codepen is to setup and use... here is the pen I made to reflect this http://cdpn.io/eKzvI ...and one with neater JS in the other window: http://cdpn.io/AKukl Thanks again for your help guys, super appreciated! ~Ronen
  2. Ronen
    Hey all, Relatively fresh in the web-dev world, really enjoying using greensock! I've been working on the website for my company. One of the features of the site will be a colour chooser/builder, allowing visitors to choose/design there own variation of one of our products (Mountain Bike related in this case). The idea is, you select the colour of the component you want, and it tweens to the select colour. I need it to fade out of the current colour, then into the selected. I've got it working, although the images I have are slightly large and un-optimized at the moment. I've created a demo site here: http://goo.gl/rvuSco so you can see the effect I'm talking about. The issue I've run into, is that when a visitor first comes to the site, prior to anything occurring on the timeLine, the fade out/in tween doesn't function. It seems to just ignore it. I've come up with a fix, by forcing a dummy tween to full opacity when the page loads, but is this correct? all subsequent tweens work great, but for some reason the first one has an issue. I've commented out my fix, to illustrate the issue on http://goo.gl/rvuSco. HTML code with JS: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Go Greensock Go!</title> <link href="/GreenSockForum/css/placer.css" rel="stylesheet" type="text/css"> </head> <body> <div class="fullPage"> <div class="colourSelector"> <div id="ringDisplay"> <img id="ringImg" src="/GreenSockForum/img/ringRenders/BlackRing.png"/> </div> <div id="bashDisplay"> <img id="bashImg" src="/GreenSockForum/img/ringRenders/BlackBash.png"/> </div> <div class="bashColours"> <p>Bash Colours</p> <div class="colourBox" id="squareBlackBash"></div> <div class="colourBox" id="squareRedBash"></div> <div class="colourBox" id="squareGoldBash"></div> <div class="colourBox" id="squareGreenBash"></div> <div class="colourBox" id="squareBlueBash"></div> <div class="colourBox" id="squareSilverBash"></div> <div class="colourBox" id="squareNoneBash"></div> </div> <div class="ringColours"> <p>Ring Colours</p> <div class="colourBox" id="squareBlackRing"></div> <div class="colourBox" id="squareRedRing"></div> <div class="colourBox" id="squareGoldRing"></div> <div class="colourBox" id="squareGreenRing"></div> <div class="colourBox" id="squareBlueRing"></div> <div class="colourBox" id="squareSilverRing"></div> <div class="colourBox" id="squareNoneRing"></div> </div> </div> </div> <script type="text/javascript" src="/GreenSockForum/js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="/GreenSockForum/js/greensock/TweenMax.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document).ready(function() { var isAnimating = false; var tl = new TimelineLite({ onComplete: function() { isAnimating = false; } }); //tl.to("#bashImg", 0.5, {opacity:1}); //<--Required to fix issue $( "#squareBlackBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlackBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareRedBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to($("#bashImg"), 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/RedBash.png'); $("#bashImg").show(); }) tl.to($("#bashImg"), 0.5, {opacity:1}); }); $( "#squareBlueBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlueBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareGreenBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GreenBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareGoldBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GoldBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareSilverBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/SilverBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareNoneBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); }); $( "#squareBlackRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlackRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareRedRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/RedRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareBlueRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlueRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareGreenRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GreenRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareGoldRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GoldRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareSilverRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/SilverRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareNoneRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); }); }); </script> </body> </html> My hack-job lovely css: * {margin:0;} html,body {height: 100%;} .fullPage { position: relative; height:100%; width:100%; box-shadow: 0px 2px 10px; background-color: #FFFFFF; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzQyJSc+CgkJPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1vcGFjaXR5PScwJyBzdG9wLWNvbG9yPScjMDAwMDAwJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScxJyAgc3RvcC1jb2xvcj0nIzY2MmYyZicgLz4KCTwvcmFkaWFsR3JhZGllbnQ+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cyJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgY3g9JzAnIGN5PScwJyByPSc0MiUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0b3Atb3BhY2l0eT0nLjEnIHN0b3AtY29sb3I9JyMwMDAwMDAnIC8+CgkJPHN0b3Agb2Zmc2V0PSc1MCUnIHN0b3Atb3BhY2l0eT0nLjUnICBzdG9wLWNvbG9yPScjNjYyZjJmJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScuOScgIHN0b3AtY29sb3I9JyM2NjJmMmYnIC8+Cgk8L3JhZGlhbEdyYWRpZW50PgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgoJPHN2ZyB4PScwJyB5PScwJyBvdmVyZmxvdz0ndmlzaWJsZSc+CgkJPGxpbmUgaWQ9J2wnIHgxPScwJScgeDI9JzAnIHkxPScwJyB5Mj0nMTAwMCUnIHN0eWxlPSdzdHJva2U6I2Q5ZDZjMzsgc3Ryb2tlLXdpZHRoOjIuNDY7JyB0cmFuc2Zvcm09J3JvdGF0ZSgwKScvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC01LjI5NDExNzY0NzA1ODgyMyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTEwLjU4ODIzNTI5NDExNzY0NyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTE1Ljg4MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTIxLjE3NjQ3MDU4ODIzNTI5MyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTI2LjQ3MDU4ODIzNTI5NDExNiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTMxLjc2NDcwNTg4MjM1Mjk0MiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTM3LjA1ODgyMzUyOTQxMTc2KScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNDIuMzUyOTQxMTc2NDcwNTkpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC00Ny42NDcwNTg4MjM1Mjk0MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTUyLjk0MTE3NjQ3MDU4ODIzKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNTguMjM1Mjk0MTE3NjQ3MDYpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02My41Mjk0MTE3NjQ3MDU4ODQpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02OC44MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTc0LjExNzY0NzA1ODgyMzUyKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNzkuNDExNzY0NzA1ODgyMzUpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC04NC43MDU4ODIzNTI5NDExNyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTkwKScgLz4KCTwvc3ZnPgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnMiknLz4KPC9zdmc+'); } .colourSelector { text-align:center; position: relative; background-color: #0c0ceb; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNzYnIGhlaWdodD0nMjc2JyB2aWV3Qm94PScwIDAgMjc2IDI3Nic+Cgk8ZGVmcz4KCQk8cGF0dGVybiBpZD0nYmx1ZXN0cmlwZScgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgd2lkdGg9JzU1LjInIGhlaWdodD0nNTUuMicgdmlld0JveD0nMCAwIDExMC40IDExMC40JyA+CgkJPHJlY3Qgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzBjMGNlYicvPgoJCQk8cGF0aCBkPSdNMSwxaDExMC40djExMC40aC0xMTAuNHYtMTEwLjQnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlLXdpZHRoPScxLjc4JyBzdHJva2UtZGFzaGFycmF5PScwLDIsMicgc3Ryb2tlPScjZmZmZmZmJy8+CgkJPC9wYXR0ZXJuPiAKCQk8ZmlsdGVyIGlkPSdmdXp6JyB4PScwJyB5PScwJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSd0dXJidWxlbmNlJyByZXN1bHQ9J3QnIGJhc2VGcmVxdWVuY3k9Jy4yIC4zJyBudW1PY3RhdmVzPSc1JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CgkJCTxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyBpbj0ndCcgdmFsdWVzPScwJy8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPSd1cmwoI2JsdWVzdHJpcGUpJy8+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4xOCcvPgo8L3N2Zz4K'); height:85%; width:60%; margin-left:20%; top:10%; border-radius:50px; box-shadow: 5px 5px 20px; } .ringColours { color:white; position: absolute; height:90%; width:40px; right:5%; top:5%; } .bashColours { color:white; position: absolute; height:90%; width:40px; left:5%; top:5%; } .colourBox { position:relative; margin-top:7%; width:40px; height:40px; border: 2px solid white; } .colourBox:hover { border: 4px solid yellow; } #ringDisplay { max-width: 500px; position:absolute; left:-10%; right:0; top:5%; bottom:0; margin:auto; } #bashDisplay { max-width: 500px; position:absolute; left:-10%; right:0; top:5%; bottom:0; margin:auto; } #squareBlackBash {background-color: black;} #squareBlueBash {background-color: blue;} #squareRedBash {background-color: red;} #squareGoldBash {background-color: gold;} #squareGreenBash {background-color: green;} #squareSilverBash {background-color: silver;} #squareBlackRing {background-color: black;} #squareBlueRing {background-color: blue;} #squareRedRing {background-color: red;} #squareGoldRing {background-color: gold;} #squareGreenRing {background-color: green;} #squareSilverRing {background-color: silver;} Thanks in advance for any assistance. It's working, so I guess its ok to do the dummy tween initially, but I was just wondering if there was a better way to do it. Also, any other hints/tips/tricks/recommendations are greatly appreciated! Cheers! ~Ronen
×
×
  • Create New...