Jump to content
Search Community

Search the Community

Showing results for tags 'line'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 11 results

  1. I don't have a working example, as I just NPMd 3.0 and grabbed the 149/year club a couple hours ago. I'm used to framer / motion.react. I'm looking for... A rubber duck. Attached is a simple Google searched SVG pitch fork. The best way I can describe my drawing is: flip this 180 and attach another fork on each end. Ok, so. I'm a developer, and i would rather start off the right way vs trial and error. Abstraction is my thing. I wish there was a visual editor, but I can f5 my way to success in NextJS. For the project: think 100 lines, 8k pixels height easy. I'm only using lines, and here are my immediate questions-- Where should I break the lines on the fork? (Handle, edge, 4 prongs? 1 center line and start the prongs when they hit?). Do you need to mask? How would I start the animations of each prong at the same time when the handle is finished? How do I get a consistent draw speed/flow in varying length lines? I'm not drawing a maze, but that's another way to think about it. I'm interested in the approach more than a codepen, but I wouldn't say no to one. Like.. fromTo vs to and all this new stuff.
  2. Giuseppe Simonetti

    Svg drawing line animation

    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.
  3. 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:
  4. 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?
  5. violet

    Animate SVG line

    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:
  6. 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
  7. Tijo

    How to add moving line

    Hi How to add a moving line while scroll page to a html page? (PFA) Example url https://bitesizeinc.com/home Thanks
  8. Tanken Bak

    Draw line from Clicked element to point

    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
  9. 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
  10. FracArt

    Draw an oblique line with TweenMaxJS

    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?)
  11. un4given

    BezierPlugin undefined

    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.
×
×
  • Create New...