Search the Community
Showing results for tags 'curve'.
Found 6 results
-
Namaste Guys, I am trying to create one animation on scroll with a svg line but can't achieve as expected. here is the screenshot and also the reference site https://thevariable.com/ I have tried so far is in the stack https://stackblitz.com/edit/react-mmp4w3?file=src%2Fstyle.css
-
Hi everyone. I'm attempting to animate a block of text from straight horizontal line to an arc that would be a part of a circle. Here is the design that I have in mind: At first, I tried to use sine, cosine to calculate the horizontal and vertical distance that each character has to move to reach the arc. The problem with this approach is that I have to set `position: absolute` to each character. As a result, my attempt looks nothing like what I have in mind, with each character radiates from the center point of the imaginary circle instead of organically moving from horizontal line to the arc. So I'm rethinking: Maybe I should scratch that and try to animate a straight line to a Bezier curve using SVG, then place the characters on the curve to make them look like they are waving from straight line to curve. What do you think? Any pointer would be highly appreciated.
-
Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve. The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object. That curve datas are given by BezierPlugin.bezierThrough So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve. Could please someone help me understand what i'm doing wrong?
-
I have a project that requires a transitional effect. I need to code ooze expanding from the top of the screen to the bottom, creating a complete wipe. The arcs/drips need to move as realistic as possible resembling a fluid sliding down your screen. This is the closest I could find to the effect I need to create. http://codepen.io/rkgttr/pen/doLKGO Except for it is just one oozing line instead of the loop, and it needs to reach the bottom instead of fading out. So here is my problem. I need to do this with GSAP and I don't know how to create those curves. I want to be able to control the arcs opposed to just using an image, to make it look like some kind of liquid. I thought about creating a cluster of dots and just animating their shadows but that wouldn't work with the concave parts. Is there a way to draw something on a bezier curve and control it? If yes how do I do that? Or do I need to work with co sin to make sine waves? https://jsfiddle.net/umaar/fWSUk/ Do I need to whip out the quadratic formula to achieve this look? I am a front-end coder and this is a whole new level of brain power for me. I might be overthinking this. Thanks for any help.
-
Is there a method of getting the same functionality of the BezierPlugin, without curves? The functionality is perfect, I just want perfectly straight lines without the curves. The codepen shows an example with the BezierPlugin, and another example (without GSAP) that plots just the lines. Thanks!
-
How can I generate complex bezier curve points that follow a graphical path? I have tested the BezierPlugin demo SWF and it will work great for my project but I'm stuck calculating the points that match the image provided by the designer. I need to animate a div with an image background that tracks the graphical path. Will Photoshop, Illustrator, or Flash calculate the points from a graphic that can be used? Is there are third party tool? Attached is a graphical example for reference. Thanks in advance for your help.
.thumb.jpg.508ba629559fba639e5f03a505c5b072.jpg)
