Search the Community
Showing results for tags 'boxshadow'.
Found 4 results
-
Hallo, we are working on a project using GreenSock, and we are wondering how to animate textShadow or boxShadow with objects. /* this is working */ var element = document.getElementById('animate'); TweenMax.to(element, 1, { textShadow: "10px 10px 10px rgb(0, 0, 0)", boxShadow: "0px 0px 5px 2px #F00" }); /* this is not working */ TweenMax.to({ textShadow: "10px 10px 10px rgb(0, 0, 0)", boxShadow: "0px 0px 5px 2px #FFF000" }, 1, { textShadow: "10px 10px 10px rgb(255, 255, 0)", boxShadow: "0px 0px 5px 2px #FF0000" }); /* this is working */ TweenMax.to({ textShadowAlpha: 1, textShadowH: 1, textShadowV: 1, textShadowBlur: 1, textShadowColor: "rgb(0, 0, 0)", }, 1, { textShadowAlpha: 1, textShadowH: 1, textShadowV: 1, textShadowBlur: 1, colorProps: { textShadowColor: "rgb(255, 255, 0)", }, onUpdate: function() { var textShadow = this.target.textShadowH + "px " + this.target.textShadowV + "px " + this.target.textShadowBlur + "px " + this.target.textShadowColor; element.style.textShadow = textShadow; } }); With the colorProps animation we managed to let it work with objects. Would it be possible to get help in animating objects/advices on the use of the plugins/Examples which are working? Thanks a lot for the support, Movad
-
Hello, I was trying to animate an inset boxShadow on an element and I saw something weird. If the element has an inset boxShadow and I tween to another inset boxShadow, the border goes outside the element. It works ok if I remove the inset on the Tween command. Example : http://plnkr.co/edit/x7OoyDcVdod2DQjB6HzP?p=preview Is this normal behaviour? Thank you
-
Setting a shadow with inset works correctly, but then setting it without changes everything but doesn't clear the inset. The codepen is a very simple example. I know clearProps could be used in this example, but is not ideal for my actual use case with multiple user-supplied shadows. Any thoughts how to toggle inset on/off?
-
This hardly seems like the most efficient or even correct way to do something simple like this, but it's the only way I've been able to get to actually work. Just a simple color change boxShadow animation whenever you click anywhere in the window. I haven't changed the autowrite method, so it should default to auto. Yet whenever I try to overwrite these tweens, the boxShadow gets a halo of the other color. Also I have to pause and seek back to the begining or I also see a halo. It has these problems whether I'm using a single tween or two. It doesn't seem right that I should have to create two tweens, pause one, then to change it I have to pause the active, seek it, then resume the other. What's going on here? Here's the only working example I've found, testing in Firefox: var status = $('#tablet-status') var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', paused:true, yoyo:true, repeat:-1}) var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1}) $(window).mousedown(function(){ status.css('background-color','green') unclickStatus.pause() .seek(0) clickStatus.resume() }) $(window).mouseup(function(){ status.css('background-color','blue') clickStatus.pause() .seek(0) unclickStatus.resume() })
