Search the Community

Showing results for tags 'circle'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 14 results

  1. Hi all. Please, help me. Why does circle clip path on image working wrong in my pen in firefox browser? My animation begin from circle(0% at 0% 50%) to circle(150% at 0% 50%), but in firefox it has value clip-path: inset(150px at 0% 50%). Why it happened? Thank you for answers
  2. hakan

    canvas fullscreen slider

    http://robinmastromarino.com/ Hi I want to make a slider in this way. Could you help me with a similar project
  3. WilliamDC

    A responsive svg circle animation

    Hello, I'm trying to create a SVG circle with an animation. It work but when I'm resizing the window, the circle animation is not responsive : the animation accelerate or deselerate by the window resizing. If wee decrease the size of the window, the animation does not end correctly. Exemple : http://guillaumeduclos.fr/circle/#/ My code : <svg xmlns="http://www.w3.org/2000/svg"> <circle ref="circle" cx="50%" cy="50%" r="50%" fill="none"/> </svg> svg { overflow: visible; width: 100%; height: 100%; border: 0px solid red; transform: rotate(-90deg); circle { fill: none; stroke: #FFFFFF; stroke-width: 2px; } } TweenMax.from( this.refs.circle, this.state.animDuration, { drawSVG: "0%", ease: Linear.easeNone, repeat: -1, //onRepeat: this.props.changeTeaserBackground.bind(this), callbackScope: this, } ); I don't know if there is any solution to manage the speed animation and create a "responsive" animation ? I did not find methode in the doc for this. Thanks for your help.
  4. Hi there, While trying to animation multiple SVG circle I found that interesting bug where if I rotate one of my circle (circle2) to the value -90 it seems to go back at to rotate back to 0deg at the end of my animation. Fun fact, if you replace the value -90deg by -90.06deg it doesn't seems to bug, I would guess there is some rounding involve, it jumps to -91deg. This bug seems to occur only on Safari 10.0.1 Even if I found a temporary fix for my problem I'm still curious on what could be done differently to avoid that bug
  5. Hello guys, I recently started developing with GSAP and i love it so far, its really great but my problem is that i am not able to change the anchor point of the circle... even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle due to this issue the animation isn't the same on both sides and it looks really weird. does someone know how to fix this issue? i also saw a solution over here from OSUblake, but i am not able to figure out how to make that work http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/ kind regards
  6. Hello friends of gsap! This is my first post here but i suspect i will return since gsap is awsome! I'm trying to make a rotating circle with arrows pointing at each word. Here is an image that shows what I'm trying to do. http://boxesandarrows.com/files/banda/prototyping-with/iterative_prototyping-small.gif How can i achieve this? I tried using css border and images but I don't know how to apply it the correct way so the arrows rotate with the boxes as seen in the codepen. I want the arrows to basically point on each box. Thank you for your time and keep up the good work!
  7. jjletho

    bezier circle

    Hi I'm working on a loader, using bezier to draw a circle. But following math I got a straight line at the top of my path. my tween is basically TweenMax.to(pillole[e],5, {bezier:{ type:"cubic", values:[{x:0, y:r},{x:-c*r, y:r}, {x:-r, y:c*r}, {x:-r, y:0},{x:-r, y:0}, {x:-r, y:-c*r}, {x:-c*r, y:-r}, {x:r, y:-r},{x:0, y:-r}, {x:c*r, y:-r}, {x:r, y:-c*r},{x:r, y:0}, {x:r, y:0}, {x:r, y:c*r}, {x:c*r, y:r}, {x:0, y:r}], autoRotate:false},repeat:1,ease:Linear.easeNone,yoyo:false}); any thought??? cheers marco
  8. Hello everyone, I am new to GSAP and I need your help to convert a CSS keyframe animation in a javascript one with GSAP. @keyframes elliptical-anim { 0% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,0deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,0deg) scale3d(.1,.1,1); } 20% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-72deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,72deg) scale3d(1,1,1); } 96% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(1,1,1); } 100% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(.3,.3,1); } } I'm using the 3D version of the animations in order to force the hardware acceleration. Thanks in advance for your help !
  9. vipulsharma144

    Creating a circular curtain open animation

    Hello I want to create a animation in which following events occurs 1) A custom horizontal scrollbar on the bottom of the page,this bar ro remain constant and do not move 2) A horizontal navigatable website( using magicscroll.js) 3) All the animation is related to horzontal scroll movement of the custom horizontal bar Animation required 1) As soon as i move the below horizontal bar the #cover div should reduce the opacity for the radius and the div behind it should be visible. How is this animation achievable using GSAP. Please help I am a newbie to GSAP
  10. hamstanim

    Best way to animate huge circle?

    Hello again! What would you think is the best way to animate a huge circle with GSAP? I've tried : Changing the width/height of a div with border radius (small to big) Changing the scale of a div with border radius (big scaled down to small and then scaled back up) Changing the width/height of a svg circle For example, http://plnkr.co/edit/vgmRe65FmzmzpcpHR7KM in full screen. But the animation is not really smooth on Firefox. I was wondering if my only option is to use a canvas element. Any ideas? Thanks
  11. tr309

    Tween around circle

    Is it possible to use TweenMax/Lite to animate objects around a circle? I can do this with regular Javascript but my results are not very smooth. Basically, I'm trying to replicate something similar to this: http://fff.cmiscm.com/#!/main Many thanks, Rich
  12. Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip
  13. Lasercode

    Circular blitmask?

    Hello ... again. I read about the blitmask now, and it is (mostly) clear to me, that and why it's a rectangular sprite. Now...I am pretty sure, that it is possible to create a Bitmap Data object, that is built a little bit differently. I am not good enough to do it in AS though, and so I just like to discuss my idea with you guys. So, my theory is that the bitmap data object is a bit like a matrix filled with pixeldata. If there was a circular algorithm built in, one could - row after row - check out the needed pixels (opaque), and the ones we dont need (transparent) and thus build a circular blitmask. The same would then even work with elliptical shapes - divisionwise...on one of the x or y axis. Yeah...you know what I mean, eh? Well..yeah. That's it for now. Are you on that already? Is there some error in my idea? Is it already achievable with some of your great stuff? Is it silly implementing what AS3 can do (well...you do that all the time dont you? ) Let me know..I'm pretty darn curious. Peace! EDIT: I rethought and...is it a good thing to mask the blit-masked MC with a cirular shape. It doesnt seem that clean actually, hmm.....but the "normal" mask only masks a single and shrunk Bitmap then, and it could be performant. But I still think, that this is a rather dirty workaround, right?