Search the Community
Showing results for tags 'gradient'.
Found 12 results
-
My goal: have an SVG (fill: gradient) animated to change into a different gradient fill. All this should be done dynamically, using GSAP v3 (maybe using gsap.fromTo()?). I can create the SVG dynamically. I can also create other elements like the <defs> and <stop> to go inside the gradient elements. At this point, I can have the SVG display the 1st gradient dynamically. And I can animate other properties (like size, speed, or location). What I cannot do, however, is animate the actual gradient fill change using GSAP. How do you do that? There are a lot of examples from others online, but what I've found only includes: - a solid color changing to another solid color, and back - a gradient changing to a solid color, and back - a gradient changing to another gradient, and back –> but does not use SVGs and uses CSS gradients instead - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)
-
Hello. Is it possible to do masked gradient reveal text or image like on https://www.apple.com/iphone-12-pro/ 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. 2. Other sections i want to reveal on scroll trigger with scrub option with gradient also.
-
Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way. background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-
Hey guys. Another Safari issue here. This probably refers to svg gradients more than the actual Tweenmax, but in case someone had this issue before and knows a workaround? I'm trying to animate the stop-color of the gradient to create transparency effect, but in Safari the color is just white with no alpha, and sometimes it doesn't animate at all. I'm not quite sure what is happening.. Any input would help! Thanks a bunch.
-
0down votefavorite I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in image 1. Needed_Picture Current_Picture My gradient and stroke definitions are as follows : </svg> script : ` svgPath.setAttribute("stroke-width", "10"); });` 0down votefavorite I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in the image named as Current. My gradient and stroke definitions are as follows : </svg> script : ` svgPath.setAttribute("stroke-width", "10"); });`
-
Hey folks. I got a rather simple problem. Please check out the code pen. Run it and then comment out the JS and comment in the CSS. What do I do wrong? Thanks.
-
Hi guys, I want to change the degree of a linear gradient depending on the mouse position. It works fine on webkit, but not considering the duration on Firefox. The code : http://codepen.io/anon/pen/JKWjOY Any idea ? Thank you ! — G
-
Hi all I need to animate an svg with gradient and I'm using SMIL at this time. Unfortunately in IE and Edge it doesn't works Is it possible to animate it with GSAP? Thanks in advance
-
Hello everybody ! How are you there ? Since my last post here, I improved a lot of things and I changed color of my illustration (not yet in function of the local time, but it's coming ! ), thank's to Diaco.AW Here is the codepen attached to this topic : http://codepen.io/BibiCoding/pen/VLpLmW But today I'm here because I have an initial gradient with 13 children "stop", but then in the other gradient, I would like to have only 7 colors in the gradient. That's why I decided to include Jquery to select children, then to make a table for new colors that I want ( couleurCiel[] ). I've done a loop with the var "c" which represent a child of the gradient (incremented at the end of the loop with "c++" and the var "i" to watch the associated table. There's an other table "offset[]" with value of the new gradient offset i would like to have. But you'll see in the codepen that without changing the offset, it only change the color of the "Defaults" gradient but not it's offset, so that there is a huge black gap on the top ! The question is : How i could change the gradient offset and include this in my loop ? And is my code well written ? The staggerFromTo is a good solution in my case ? Moreover, you'll see that the animation is not really fancy, it goes one color after an other and it would be wonderfull if each children could changes at the same time (overlapping tweens ?) Thanks a lot and have a nice sunny day ( I hope for you )
-
Hi! I was wondering, I have a btn like this: #my_btn { background-image: -moz-linear-gradient(top, #3e3e40, #252122); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #3e3e40), color-stop(1.0, #252122)); background-color: #DDDDDD; } How can I animate the background gradient on roll over? I tried the code below but it doesnt work. var mybtnOnOver = $('#my_btn'); mybtnOnOver.hover(function() { //mouseover TweenLite.to($(this), 1, { css:{ backgroundImage: '-moz-linear-gradient(top, #ACAC8F, #ACAC8F)' } }); },function() { //mouseout TweenLite.to($(this), 1, { css:{ backgroundImage: '-moz-linear-gradient(top, #3e3e40, #252122)' } }); }); In general where can I find the css properties that are supported? Thanx a lot for any answers! Cheers! -
Hi! best wishes for ya'll green(s)®ockers! Good health & what floats your boat! enjoy!! my question: Is it possible to define a gradient of lets say 4 color stops in jquery then loop through an array of colors and one of those array items is that gradient... the rest is a single color. Here is what I have. (it might look dirty... just testing ) The rainbow_array in the color array obviously doesn't work, its just to illustrate what i am after. Many thanks for some insight! var rainbow_array = Array ("e21111", "11e2c2", "a011e2"); var color_array = Array("#ffcc00",rainbow_array, "#e7353a", "#b62727", "#eeeeee", "#d5d5d5", "#0c0c0c"); $('#clickable_thing').click(function(event) { var parent = $(this).parent(); parent = parent.find("rect"); var fillcolor = $(parent).css('fill'); console.log(rgb2hex(fillcolor)); TweenMax.to(parent,.4,{fill: color_array[i]}); if(rgb2hex(fillcolor) == color_array[i]) { if (i < color_array.length-1) { i++; if (i == 1) { /*do gradient*/ } else { TweenMax.to(parent,.4,{fill: color_array[i]}); } } else { i = 0; TweenMax.to(parent,.4,{fill: color_array[i]}); } } });
-
Hey everyone, At the moment I'm working on a small class for myself to make different animated buttons with javascript, html and css (personal pre-made buttons to add them to project in the future). I'm making as much different animation I can think of growing, shining, depth, vibrating etc etc... I am now at the part where I am making them compatible for all browsers as much as possible (it's horror...) and working on a button that scales larger on mouse over. In all browsers this works perfectly fine except in IE7, IE8, and most likely IE6 too but I cant test that one. In these browsers the button does animate somewhat but does not expand and when it animates it removes the gradient filter that was on it... I have no idea how to enter this in jsfiddle, it's fairly complex :/ Because I want it to use as few files as possible and only want 1 line of code in the main document to call a button from the class, I generate the html and css of the button inside the JS file. The gradient I use for IE 7-9 is: gradientIE79 = "filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="+ color2 +", EndColorStr="+ color1 +"); (color1 and color2 get added dynamically) and on the same button I use the follow Tween: TweenLite.to(button1, 0.25, { css:{scaleX:1.15, scaleY:1.15}}); What happens on my screen is that the button does show a sign of scaling, the top left corner of the button (I can see it because it still has a border around it) moves to the left corner to which it is supposed to tween. The problem is that the whole button move to the top left, it just re-positions instead of growing. Not only does it re-position but it also gets rid of the gradient that was on it as soon as the tween starts. I know it's all very confusing and I'm trying to explain it as good as I can. If there is anything not clear or if I left anything out, let me know. Thanks
