Lynx
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Lynx
-
-
The points are saved within the SVG file but you must extract them without destroying the SVG graphic which is not only pain staking but a hit or miss; not ideal route to go down.
A script would be helpful, thanks for the input everyone
-
I tried all of the resources you linked too, why I asked here; I'll try another forum.
-
Anyone know how to save points as SVG from Illustrator ?
-
The use tag is non-existent ?
It is exactly what I want to do to keep mark-up cleaner, what solution is there for IE 7+ ?
-
It can be done without manual interaction (Draggable). Here's a quick modification where I tween the x values on p2 and p3. It's the start of a swing!
See the Pen 1779979d6d2e85354c028ef8efbd06ef?editors=0010 by osublake (@osublake) on CodePen
Notice how the path is stretching. I used arbitrary y values. To prevent that you would need to do some trig to calculate the y value for the given x values.
That is is exactly what I'm after. My goal was to export numerous SVG files and with GSAP morph rotate and morph, this is more effective.
-
blake are you referring to this;
<div> <svg> <use xlink:href="left-hands.svg#left-hand"></use> </svg> </div>
Where as the SVG is loaded externally ? Then again, if this is what you are referring too, can you read a class or id via xlink ?
-
Ah yes, trig, been dealing alot with that lately. I may have figured a solution, in the mean time this example, the rope is not dynamic on it's own; in other words it doesn't swing without manual interaction ?
-
Duh
-
-
-
Before I go back to how to make a swinging rope, I've been digging though the documentation, for TweenMax and CSSPlugins and I can't find anywhere that states that elements can only be ID, not classes ?
-
I thought class work ?
-
Some of these examples appear as though the SVG code is embedded within the page, rather then the SVG file being external, not the cleanest route if you have multiple SVG files and want to keep mark-up to a minimum ?
-
How about a particle represents a non-existent segment in the SVG file lined up vertically in my example, then you animate the points ?
-
I wonder why my example doesn't play in JsBin, I even tried in CodePen, no result
-
-
This is what I want to do, and this is what I've started. I want the origin of the rectangle at the top, now there is a tween for changing the color, I want to leave that in place, although I don't understand why it's not working ?
I want the rectangle to swing like a rope, that is why I want the origin at the top so it's pinned; I looked within the documentation for a GSAP plugin which does some swinging dynamics but couldn't find anything, I hope it's possible with GSAP ?
Ps. Does this forum have email notification ? I never receive any notifications to my posts ?
-
That's a bit clearer of an explanation. At first I thought you wanted to morph the path an object was moving on OR apply physics to the speed of different points that were being morphed.
For what you describe now it seems like you could animate the position of a <g> and morph a <path> inside it like:
See the Pen JKdOvP by GreenSock (@GreenSock) on CodePen
I assume you can morph multiple paths into one shape, with wind. For example, in one <g> group you have multiple circles, you want, suppose six circles to morph into a custom shape within 3 seconds of those circles animating ?
-
GSAP can do particles. Here is a little example, suppose you had snow falling and as it is falling it morphs into another shape ?
-
I don't need realistic, as long as it can be done.
I don't have any example I can show other then, a circle, or rather many circles as a svg shape, being animated by physics2D while it's being animated by wind, as it animates it morphs into another shape ?
-
I'm going to assume it's possible to animate SVG paths with wind using Physics2D Plug-in along with Morphing so particles are attached to paths and as those particles move in the wind, the path can morph into another shape as it moves in the wind ?
I hope after all the "Is it possible" questions I've thrown at this forum; I know the limitations of GSAP, and how to solve those work arounds, if required.
-
This effect can't be done with CSS
I don't need it to be elaborate, why I decided to go with CSS over anything else, including GSAP. What I wanted was a animated effect on ::hover, and once again it appears canvas is only capable of handling the task ! -
I need to have the SVG graphic eraser, animate and erase the SVG graphic, previous. I've tried aligning classes as in @keyframe .className; as well as nesting a class within @keyframe with no success ? I've asked online and it seems it's not possible with CSS @keyframe, I prefer to do it with CSS @keyframe. I know it's not directly a GSAP question I'm hoping someone can give some feedback.
[example]
-
SVG Reveal ?
in GSAP
Yep - you can mask an SVG group and move the mask over it. GSAP isn't making the colors in the shape transparent - the mask is just hiding and revealing the underlying group in the SVG.
Here is the world's simplest SVG mask demo to show you how it works.
Happy masking.
How about controlling the mask based on the scrolling or swiping speed ?
ScrollFire or Waypoint Equivalency?
in GSAP
Posted
Has there been an update to which greensock can respond to scroll positions ?