Search the Community
Showing results for tags 'circular'.
Found 5 results
-
I'm trying to replicate this CSS pen with GSAP: http://codepen.io/robbue/pen/orLhG/ Any suggestions?
-
See the Pen GSPreloader by GreenSock (@GreenSock) on CodePen. I had some fun creating a simple little preloader animation with spinning dots that animate in/out with a single JS call. This is what we're using on the new GreenSock.com. All it does is: Create a certain number of DIVs (you decide how many) with border-radius:50% to make them circular Offsets their transform-origin to whatever radius you define Rotates each one to disperse them around a big circle Drops them into a wrapper DIV that's fixed-position, centered perfectly in the window with a high z-index Creates a repeating/looping TimelineMax instance for each dot, animating its rotation "-=360" (360 less than whatever it starts at, thus one full rotation around the bigger circle) and then its skew by "+=360" (this is what makes it appear to "flip") Place each dot's TimelineMax into a master TimelineLite instance in a slightly staggered fashion. This TimelineLite serves as the container for the whole animation, making it simple to control as a whole. To animate out, the main TimelineLite gets paused, and a new tween for each dot animates it from wherever it happens to be, off the screen in a cool way (again, slightly staggered). This would be pretty tough or impossible to do with pure CSS. Features Completely customizable - use the config object to define the number of dots, the size of the dots, the radius of the circle, the colors (as many or as few colors as you want), the opacity and border of the background box, etc. Pure JS. Copy one JS function, and make sure you load TweenLite and CSSPlugin (or just TweenMax which has both), and you're good-to-go Automatically centers itself in the window and sets the container's z-index to 200 Call your preloader's active() method to turn it on or off. preloader.active(true) turns it on, preloader.active(false) turns it off, and you can check its status using preloader.active() (no parameter). -
Hi, I am new here and new to greensock as well. One of my friend referred me to this awesome kit. I want to create an animation where there will be 2 different images (similar like before and after image effects with color and black & white image) but unlike, here it will be 2 different images and not a grayscale (so css property may not work). The second image will cover up/load circular motion. here is the demo I created http://codepen.io/bgthedev/pen/wzrGxJ/ In this demo the problem is, as you see, it is noticeable that I have used 2 separate images which is not proper. Is there a way to create such animation? except clip-path because that does not work with firefox Thanks in advance! BG
-
Hi all! I want to make animation as here http://css-tricks.co...ples/Circulate/, the bottom of the page, the flying balls. But nothing happens. Tried Bezierplugin saddled with, but in the end there is a sharp transition is not smooth. Maybe someone knows how to do, tell me please. Here's an example of my code var maxx = new TimelineMax({repeat:-1,delay:1}); maxx.to($('.b-circul1'), 1, {css:{x:400,y:20,scale:0.5},ease:Linear.easeNone}); maxx.to($('.b-circul1'), 1, {css:{x:800,y:0,scale:1},ease:Linear.easeNone}); maxx.to($('.b-circul1'), 1, {css:{x:400,y:-20,scale:1.5},ease:Linear.easeNone}); maxx.to($('.b-circul1'), 1, {css:{x:0,y:0,scale:1},ease:Linear.easeNone});
-
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?
