Jump to content
Search Community

Search the Community

Showing results for tags 'circle'.

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

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 19 results

  1. Hi, I am just starting on gsap from last few weeks. I have a simple animation, I am trying to figure out from last few days. I have a circle and dots on the circle radius. Requirement is to scale the dots when the screen enters the section and when the user scrolls each dot should get a border indicating different content (which means a text change and image change). The issue I am facing is the borders around circle are able to appear correctly when scrolling down. But when scrolling up, the borders around the dots are not disappearing correctly. Only 3 dots out of 5 disappear when it reaches the first content, where 4 should disappear. I am not sure if I am having the right approach. Any help in the right directly is greatly appreciated. thanks in advance! Codepen attached.
  2. Hi community, https://htxrgj.csb.app/ I want to animate my animation using scroll within 1/4 or circle, or in arc shape, please checkout for code given on codesandbox. The main issue is that everything working fine but, while from each last element is move to one step up, then a translateX is not working smooth. and I want it smooth. I hope you got my point..! Thanks in advance..!
  3. I have an animation that draws a progressively increasing circle on the canvas until it occupies the entire canvas: const maxRadius = Math.ceil( Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2 ); const centerX = canvas.width / 2; const centerY = canvas.height / 2; let radius = 5; function animate() { if (radius >= maxRadius) { canvas.remove(); return; } context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2); context.closePath(); context.fill(); radius += 5; requestAnimationFrame(animate); } animate(); And I tried to rewrite it using GSAP but it doesn't work: const maxRadius = Math.ceil( Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2 ); const centerX = canvas.width / 2; const centerY = canvas.height / 2; let radius = 5; gsap.to({ radius: maxRadius }, { duration: 1, radius: maxRadius, onUpdate: () => { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2); context.closePath(); context.fill(); }, onComplete: () => { canvas.remove(); }, ease: "power1.inOut" }); Please help me
  4. 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
  5. Hello, I found an animation that, when scrolling, fills a strip of a circle. I decided to do the same on scrolltrigger. I found this animation on this site https://digital.vtb.ru/digest/2021-apr/ I also uploaded a photo of how it looks Probably this is done as something with svg, or with a blue background at the back? I do not know how to implement this on scrolltrigger. I hope for your help. Thanks in advance
  6. Hi Everyone, The CodePen associated with this was forked from @OSUblake. I was successful in adding viewport responsiveness and circular button expansion but am failing in reversing to a circular button collapse. I believe I set the circular canvas diameter and arc correctly but when clicking the close icon on the menu button there is no canvas animation. I would appreciate some assistance and sincerely thank you in advance.
  7. 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
  8. http://robinmastromarino.com/ Hi I want to make a slider in this way. Could you help me with a similar project
  9. 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.
  10. 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
  11. 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
  12. 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!
  13. 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
  14. 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 !
  15. 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
  16. 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
  17. 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
  18. 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?
×
×
  • Create New...