Lynx
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Lynx
-
-
Can you add more control handles to your second code pen example ?
Awesome work, Blake. My mind is melting.
Lynx, you can animate any numeric value and apply it to anything you want. This is one of the core strengths of GSAP – it isn't tied to CSS values or any rendering layer.
See the Pen OVpVBr by chrisgannon (@chrisgannon) on CodePen
See the Pen RNdrJw by chrisgannon (@chrisgannon) on CodePen
If you intend to merge the effect Blake created with your coil image (above), no, that doesn't seem feasible.
-
Creating realistic movement of a coil being unrolled is no easy task. Connecting all the different curves together requires using some type of transition curvature like a clothoid/euler spiral. This is what engineers use to make the geometric design of highways, railroads, and roller coasters all nice and smooth. Carl wasn't kidding around when he said that you would need some pretty solid math skills to do this. There is a lot of calculus involved, and I'm not aware of any JavaScript library that can do this.
A couple of weeks ago I found some font-drawing software on GitHub that does a nice job of creating curves. I was able to port the curve design code over to JavaScript and got it working with GSAP. I must say that the results are absolutely amazing. Unfortunately, when I tried putting it up on CodePen I ran into a lot of problems.
I never noticed this before, but CodePen runs some stupid script that injects code into your loops that is supposed to prevent infinite loops from happening. Sounds nice and all, but it does the complete opposite for this project and keeps creating infinite loops, breaking everything. I know how to fix it. I just need to convert all my loops into functions, but I really don't feel like messing with it right now. I'll get back to it in a couple of days and put it up online so you can play around with it.
In the meantime, here's a video of me playing around with some SVGs and Draggable. Look how easy it is to draw a path while maintaining a continuous curve. Try doing that in Illustrator and let me know how it goes.
Can one animate the control points ? And can one replace the curve in the video, with an image ?
-
See the Pen dFuop by sebastienjouhans (@sebastienjouhans) on CodePen
is done with canvas, but it's heading in the right direction; if GSAP can't do this, and anyone knows a canvas forum please point me the direction
-
That is morphing; I was hoping one could take a path and coil it up and uncoil it ?
-
How about one curve un raveling ? Anyone have the math knowledge to help me ?
-
Simply uncoil and coil up something, lets use a wire as seen in the image as an example; it could be anything !
Does the SVG need to be coiled up or straight; I'm assuming straight ?
-
That is a coil
-
How can I coil up a SVG image using GSAP ?
-
Still trying to make stuff grow.
You should start out with something basic like a rectangle.
See the Pen 45acd3617e6ec885fe7df8e1e705e0be by osublake (@osublake) on CodePen
Then check out this post by Sara Soueidan to create more complex shapes.
This is perfect. Except I set stroke="#000000" for the id=rect so I could see the rectangle, but the rectangle is not showing with a black outline ?
The only problem with your last example; post #3, is varying widths, which I know gsap can't do.
Can you control control the speed to which it's revealed by two methods, the speed someone swipes on a touch device and the speed to which someone scrolls on a desktop ?
-
Hi, I want to reveal this, using bezier paths, at first it's invisble, then an object moves from the top, down following the path of the image to reveal the image.
How do I hide the image before revealing ?
-
I know you guys recommend canvas, this is the effect that I'm after.
-
I do have some material on canvas, I never read
From my perspective, canvas is coding what photoshop does, except for the web. Unless I want a components effect, GSAP can do such stuff, otherwise, canvas is the best alternative.
-
OSUBlake - If I recall, you mentioned it may be hard to implement this on a page ?
Not Growing as in, scaling growing, growing as in literally growing, like how your finger grows, or a branch on a tree grows. A branch on a tree starts off short, then as the tree ages it gets longer.
-
These particle effects are good, when your going to something specific, as in a SVG graphic breaking up into particles, is this possible, all I see are examples of firework type effects, and visually as great as they may be to some, visually there sorta bland.
-
I see it's a limitation of SVG, bummer. One problem with Diaco example, if you increase the stroke width in the style, you see the path consist of multiple lines joined together, can this be smoothed out ?
-
See how the thickness changes, that is what I hope can be achieved with GSAP ?
-
However I am not sure how you are going to do a variable width stroke
This would be the only thing, GSAP can't adjust the width ?
Couldn't you tween the stroke width ?
What about this;
selector {stroke-width:20px}
" "{stroke-width:30px}
" "{stroke-width:40px}
Then tween using the same selector using a SVG path?
-
Look at number eight on this page. The only difference is, I need control over the path width.
-
Easy, how does a tree branch grow ! Take a word, for example, apple and make a path of the word, which would consit of hundreds duplicates of the word apple, and that would form a solid path.
-
Carl you example shows a few words following a path, I want a growing effect along a path. The only thing I didn't mention in post #7 was the word growing, other wise the rest of that post remains the same, using words, as a growing effect as mentioned in that post as an starting example. I want to say similar to illustrators blend paths, I don't want to make confusion.
-
The fiddle is in the first post. I posted only the code, the loop I posted in incorrect, in other words, it won't do anything. I want to know where I went wrong ?
-
for (i=10;i<10;i++) {TweenMax.to(document.getElementById("one"), 5, {bezier:[{left:200, top:400}, {left:50, top:0}, {left:35, top:12}], ease:Power1.easeInOut})};?
-
I did a few mistakes, position:absolute for one, thanks for the refresher
Everything works, how can I make it a series of text, as a vine would work ? Remember this is just a placeholder, not going to make a vine of text
Just a note, other coding forums sometimes takes things a little too literal -
What am I doing wrong as a starting point ?
Coil up a SVG graphic ?
in GSAP
Posted
The problem Blake brought up regarding how I would get the graphic to bend was put into consideration
I thought of a solution, nothing new; getting the pieces in order before the code ! 