Leaderboard

Hi @candybanners It looks like Edge doesn't like the way you structured your clip path. If you add the rectangle directly to the clip-path without using <use> it seems to work just fine in all browsers. Hopefully that helps. Happy tweening.

Here are two approaches.

Those are excellent suggestions from @Sahil If you want full control over the timing and ease of playing through a segment of a path animation you can put your animations in a TimlineMax and use tweenFromTo() like: var black = new TimelineMax() black.to("#black", 5, { bezier: { values: bezier, type: "cubic" }, ease: "linear" }); var red = new TimelineMax() red.to("#red", 5, { bezier: { values: bezier, type: "cubic" }, ease: "linear" }) //tweenFromTo(startTimeOrLabel, endTimeOrLabel, {vars}) red.tweenFromTo(red.duration() * 0.5, 0, {repeat:-1, yoyo:true, repeatDelay:0.2, ease:Power2.easeInOut}); black.tweenFromTo(black.duration() * 0.5, black.duration(), {repeat:-1, yoyo:true, repeatDelay:0.2, ease:Power2.easeInOut}); Read TimelineMax.tweenFromTo() docs

@bparticle What I had suggested might not be good idea. It will cause you a lot of trouble to make it responsive. I went ahead and tried different approach, this solution is a lot cleaner and responsive out of box. What I have done is really good solution in my opinion but if you want to get best performance then you might want to switch to canvas. To optimize further, you can also remove ticker event when your timeline completes and just call the drawPoly function manually on resize. If anybody else has better solution please respond.

Yep, just to be clear, MorphSVGPlugin was built for SVG and it automatically does a bunch of work to subdivide and make sure the number of points match and that the shapeIndex is the most intuitive (how the shapes morph...like the order of the points). So if you're just animating a plain string, GSAP can of course do that (isolating each number in the string and interpolating between corresponding positions), but you lose out on the 2 magic pieces (matching point quantities and re-ordering the points so that the shapes morph in the most intuitive way). Does that help?

Hi @Daniel Park I can't speak for everyone else, but my general rule of thumb is I use GSAP to set() everything I plan to animate. If a property is not going to change, I use my stylesheet. If you're triggering animations on scroll, you wouldn't even need to set() them. You could simply use a from() tween and they'll be all ready for you to tween when you hit the scroll trigger. As far as performance and the FPS drops you're seeing, we'd have have to know what you're animating. Are they large SVGs and pushing the browser a bit too hard? Ultimately, GSAP is animating values and a lot depends on what you have moving on the screen and how hard you're making the browser work. I'm not sure if that helps at all, but that's my two cents worth. Others may jump in here as well. Happy tweening.

@bparticle That looks really cool, as if it is grabbing all around like octopus to get closer. And yes the previous demo was mess, glad second demo made it easy for you.

I don't see it either, it is most probably graphics card issue. Glitch, drivers issue or missing drivers update.

@Sahil This is great stuff. I have based my code on your demos and it's looking great! I made a new CodePen to illustrate what effect I was looking for specifically @Sahil Your latest code suggestions made it very easy to attain the appearance of a div "folding open", since it's based on percentages of the target div width and height. Very flexible and very stable. Thanks once again.

Sorry I am little confused, you mean you need need word cloud to print business cards? That's really odd question for GreenSock forum. Anyway, you can use https://www.jasondavies.com/wordcloud/ to generate the cloud for you by using just first word of each line. After that you need to use illustrator or something else to edit downloaded SVG from that site. Just change the text to lines, minor adjustments to fix overlapping text and done. Doing that programmatically is going to be time consuming and doesn't seem somebody needs to write code for it either.

Not exactly sure what final effect you are trying to achieve. If it is just for single div, then you need your svg to have height and width same as your div. If you are trying to use SVG as background on multiple divs then you need to do slightly more calculations to calculate distance between svg x,y and div x,y coordinates. If you are planning to use some kind of background and use these polygons as clipping path then you need to do some additional math to convert viewport coordinates into screen coordinates. (if you are going to use viewbox attribute on your svg);

That's perfectly acceptable, sure. It's also okay to set things in CSS initially, but I'd strongly recommend using a GSAP-based set() for anything transform-related because: It normalizes browser behavior (browsers have some weird issues with transforms in some cases) It ensures that GSAP caches the independent component values properly. For example, you can have xPercent as well as an x (stacked), but if you tried setting those in CSS, the browser always reports them in a matrix() or matrix3d() without any percentages, plus that loses any data about rotations beyond 360. So basically it helps things be more accurate. It makes future tweens faster (due to the caching of the values, it can skip the complex parsing of CSS matrices). I doubt you'd see much of a performance difference in real-world situations. The only other thing to keep in mind is that sometimes the browser doesn't run JS for a brief moment on initial load, so if you try to set() opacity to 0 or something, it may initially show as visible for a moment before the JS kicks in and hides it. In those cases, I'd just set the CSS opacity or visibility or whatever to hide it initially. Does that answer your question?

I'm not around a Safari browser right now, so I can't tell. Canvas usually displays the same in every browser. Try changing the version number from the dropdown at the very bottom and see if that works. And what about here? And what about the filters here? http://pixijs.io/pixi-filters/tools/demo/

hmmm... not sure what to tell you. I'm just not seeing that. Maybe a weird graphics card glitch? Have you tried another computer and/or browser for comparison? If anyone else sees that, maybe they can jump in here. I wish I could help more, but it looks fine to me.

Are you seeing this in all browsers? I just played and resized it in FF, IE, Edge and Chrome and didn't see anything odd.

Ya you just need to update svg's dimensions and position as per the div and rest of calculation can remain same. Mostly depends on how you are going to set up your elements but should be easy. EDIT: @bparticle I have updated demo.

Thank you @Sahil

The only issue with using set for items initial state is that the DOM may render the elements before the javascript is ready and you may see a flashover of the item unexpectedly. There's various ways to get around that such as hiding page display until the javascript is loaded. Setting the initial state in css will pretty much always prevent it though. You could even set it inline on the item since gsap is just going to animate the inline properties anyway, lots of people would frown on that, but I don't care. With respect to performance I don't see any likely difference in performace whether you set the css in gsap or pick it up from the item's current state. Maybe if you had a large number of items it might.

I 'm going to hazard a guess that what you want is a vertical accordian style affect where you click on a column and it expands and the others collapse to much thinner columns but remain clickable so they can expand as well? Or perhaps you want the other columns to slide underneath the expanded one? And the background image is supposed fade in and fill the expanded column? As noted it's hard to tell for sure what you are trying to achieve.

It should be on by default, but maybe try here. https://support.biodigital.com/hc/en-us/articles/218322977-How-to-turn-on-WebGL-in-my-browser

I just tested in Safari and it all seems fine to me.

There's significantly less overhead when using canvas, and most canvas operations are hardware accelerated. Canvas was made for animations. HTML is for content. And for even better performance, check out PixiJS.

Thanks for the demo! Looks nice and its super helpful. When you use the "transparent" keyword in GSAP it actually animates to rgba(255, 255, 255, 0) which is kind of like invisible white. below is a demo comparing animating to transparent vs rgba using your color and alpha 0.

It goes gray because the body background is white. The blue is fading out and the white is starting to show. It's starting to mix with the underlying color. If the body was red, the blue fade would appear purple as it changes to transparent. Happy tweening.

Shiny new CSS properties. If it's available, let's use it. filter: brightness(90%) contrast(70%) hue-rotate(68deg) saturate(400%) sepia(80%) What could possibly go wrong? Performance all comes down to what you're animating. Replace the hero animation with a canvas animation, and pause/hide stuff that isn't visible, and your site will be usable. All the animations are in the background, so there is no compelling reason to use HTML/CSS. And yes, you can use GSAP to animate canvas. Check out the showcase page. Not every, but most of the sites on that page use canvas/WebGL for background animations. https://greensock.com/examples-showcases

Well, GSAP won't be a magic bullet that'll make that page perform beautifully by simply swapping it in there. In a way, it's a layer of abstraction, but only at the JS level - it doesn't use CSS animations/transitions for anything. So in that respect, it's very different than what you're using right now. I suspect that the bigger problem is the sheer amount of work you're throwing at the browser's rendering engine, repaints, etc. GSAP might help a bit, but it'll likely take some reworking of the structure of the page, how you're setting everything up, the amount of subtle animations you've got going simultaneously, etc. It seemed like you've got a LOT going on, most of it rather subtle but it's costly nonetheless, so you may want to consider sacrificing some effects for performance. The more pixels you're changing (even a tiny shift in color/opacity), the bigger the repaint area and the more work the browser's gotta do. Keep the changes to as small an area as possible. You may even want to consider switching to <canvas> for chunks of it.