Jump to content
GreenSock

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

Search the Community

Showing results for tags 'change img attributes'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

  1. 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
×