Search the Community
Showing results for tags 'line'.
-
Hi everyone! I'm trying to find a good solution for an animation that i have to create. My goal is to have a line in svg that draws a constellation, in every corner of this line there is a "star", and i would like to have something like a "pulse" animation whenever the line reaches the single star, and a text near every star with a fade in animation. I attach an image that shows the final result i want to reach. Does anyone has some tips? I made some tries so far, but i can't reach a good looking animation.
-
Hello everyone, I hope you're doing well. I'm seeking immediate assistance with a topic concerning horizontal scrolling. Initially, I have an image that needs to be zoomed (scaled) from the center to the top, and then further zoomed into the center (the zooming functionality is currently working fine). Following that, I need to implement a horizontal scroll to the right. When the left edge of the text card reaches the center of the viewport, it should reveal a line (desktop-line-animation) towards the image, which is positioned halfway on the left side. The scrolling should be pinned while extending and reducing the line. Once the line is completely revealed, scrolling should continue, and the text needs to change to new content until the video comes fully into view, at which point the scrolling ends. I've been using stops, but currently, everything occurs after the image has finished zooming and before scrolling starts, resulting in a significant delay. Any suggestions or improvements to optimize this process would be greatly appreciated. I'll attach a desing and to show you how it should look like:
- 6 replies
-
- horizontal
- horizontal scroll
-
(and 3 more)
Tagged with:
-
I'm a beginner and with some effort I managed to do this project, however, at the time of implementing the tests, I started to see that TweenMax has vulnerabilities. Can anyone help me refactor this code to an updated version with no vulnerabilities?
- 3 replies
-
- cursor
- follow cursor
-
(and 2 more)
Tagged with:
-
Hello everyone, this is my first post so sorry if I'm wrong in something. I'm unable to create a Codepen but I've created a Codesandbox, I hope it's good anyway. What I want to do is very easy: animate an svg line tag. So I created a tweenMax.to animation but it seems not to work. Why? export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => { const lineRef = useRef(null) useEffect(() => { if (lineRef.current) { TweenMax.to(lineRef.current, 1, { x1: x1, y1: y1, x2: x2, y2: y2 }) } }, [x1, y1, x2, y2]) return <line ref={lineRef} x1={x1} y1={y1} x2={x2} y2={y2} {...props} /> } When I run it, I get:
-
Hello there! How make this hover effect on lines if used GSAP? I created this https://jsfiddle.net/muk0h4o2/ But it wasn't exactly what I wanted. And I like this example https://codepen.io/waaark/pen/ENRvvq But I want created lines and horizintal position. Thanks! 1402696f-1275-4fd9-8a36-462296ee8fd2.mp4
-
Hello, Im trying to create click points on image/svg, that will animate line and point to another element point. As on image example if line is on building 1 and some one click building 2 or 3, line will go to clicked building. Best wil be if it could move just ending point from one to another position, transforming whole line That's my pen https://codepen.io/isuke01/pen/yLyyeyb but nothing exacting so far, I just create clicking area with callback, but I have no idea how to make this to work as it should. Thanks for any help
-
I was looking if it was possible to animate a curved line between two points so that if one point is dragged the line follows in a natural way. Like pulling a plug from your audio system and place it another place. I know there are possibilities with bezier curves used as path and there is something like 2dphysics. But I want to know if such a thing is possible with GSAP. After long time Google I found an example at http://www.jasondavies.com/animated-bezier/which is pretty much what I mean. If it's possible using GSAP, what are roughly the steps to take? Just found another example: http://codepen.io/ayamflow/pen/HrbKqmight be good start
-
Hi everybody, for a personal project I would like to build an oblique progress bar. So, my first question is: Is there a way to create dynamically and easily a Line object with Tweenmax.js? For the moment I just resize the width of a rectangle shape like this : http://jsfiddle.net/FracArt/6GJ67/2/ Which actually works! But seems a bit "hacky". Second question, as you can notice on the jsfiddle file I tried to build an oblique progress bar on the same principle. However, when I rotate the rectangle a gap appears between the initial and final position of the bar. So do you have an idea of how I can correct that without doing some geometry calculations? (maybe a transform-origin property on the css?)
-
I cant seem to get accsess to the BezierPlugin, I get a undefined error. My aim is to draw the line my object moves along using bezierThrough, do you know of any simple tutorials/examples of this? I found a few but they are quite confusing.
- 7 replies
-
- bezierplugin
- draw
-
(and 2 more)
Tagged with: