Lynx
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Lynx
-
-
SVG Reveal ?
in GSAP
I have a question about what GSAP can and cannot do with SVG. This is a SVG file with a mask.
Can GSAP make the colors in the shape transparent and reveal only when the mask begins to come within the SVG graphic region. In other words, the SVG file is transparent, the mask is position above the graphic, as the mask begins to literally overlap the SVG graphic, the SVG graphic begins to reveal its self, until the complete graphic is revealed ?
-
1
-
-
Diaco,
var S = document.getElementById("grad").getElementsByTagName("stop") , SL = S.length;
You can get the Id & tag name in one variable with a dot separating the two, interesting, then I assume you are creating a variable SL ?
-
I have a SVG file which has a linear gradient, I want to animate the gradient fading in, this is strictly for experimentation at this point, but can one group some of the colors from a radial gradient while leaving the other colors; the result would be a fading in while blending with the other color that remains static ?
<radialGradient id="SVGID_1_" cx="160.6982" cy="160.3057" r="129.5064" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#00AEEF"/> <stop offset="0.0608" style="stop-color:#00A2E4"/> <stop offset="0.1969" style="stop-color:#008DCF"/> <stop offset="0.3346" style="stop-color:#3D78BD"/> <stop offset="0.4714" style="stop-color:#5D67B0"/> <stop offset="0.607" style="stop-color:#6E58A5"/> <stop offset="0.741" style="stop-color:#784B9E"/> <stop offset="0.8728" style="stop-color:#7D429A"/> <stop offset="1" style="stop-color:#7F3F98"/> </radialGradient>
-
-
-
Blake, the image must be tilable, just so the image does not stretche ?
The SVG image I have is not tilible friendly as it's all designed in Illustrator, I could claw back the amount of design I do to the image, but I can't make it tilable without destroying the design.
Seeing your other example Blake it appears the SVG graphic doesn't need to be tilable, if there are enough control points, you can miniuplate the control points to animate how you want it via either CodePen / JSFiddle (I know everyone on this forum from what I see adores CodePen
) then spit out those coordinates to most likely JS put that in a script file and it will simply animate as it was set out to animate, then it would be how I envisioned. -
Notice how the play back is not a fluid loop ?
JS Fiddle doesn't experience the problem which I mentioned previously, as does live page !
-
That is working but causing my menu other problems, any others suggestions before, if I have to, give a JS Fiddle example ?
> is directly ignoring any class within parenthesis, hrm.
-
What I have it's not working ?
.to("#main_nav:not(.box)" -
Doesn't GSAP support negating a selector (CSS 3) ?
-
Thanks, I'll keep that in mind when using jQuery and GSAP together
-
The problem is only with the live page, those who have offered advice not including this forum have all pointed towards the problem with GSAP library.
-
Hrm, I fixed the code error; but, not the JSFiddle page, rather the hosted page does not play the effect ?
-
-
Or is your site the creative sheep thing?
Correct, that is the site ! At first I thought it was a CDN issue then I thought it's working on JSFiddle
-
I sent the JSFiddle to someone else; here it is.
-
I was just using the default forum link; those willing to help, I assume you found ? Otherwise any idea as to what the problem is ?
-
In post #5 I mentioned to look here.
-
No, no, no the effect is working in JSFiddle; not in my actual page, what I don't understand ?
-
Any help ? Link is in the first post.
-
JSFiddle is playing the code fine, when I upload to the server, nothing happens ?
-
Thanks
-
Sorry, I've been searching for the link on how to add the GSAP script to a page ?
-
I want to add some dynamics (wind) to only the depth (z) of this menu when it is collapsed and only when it's collapsed !
SVG Reveal ?
in GSAP
Posted
Can you add noise to the mask with GSAP ?