pnmcosta

Hi, Thank you so much, you've all been really helpful @Blake, these are great examples, but quick question, what are the attributes r, cx and cy for? From: TweenLite.set(circles, { attr: { r: 0, cx: "50%", cy: "50%", }, xPercent: -50, yPercent: -50 }); Thanks, P.

Yes, ideally these would be animated, on load/resize, staggered, from a central position, from/to opacity:1 I was hoping GSAP may already have a plugin that would handle a "spider web" like effect, where each blob-item is connected/linked to a main one (centered) and limited by bounds/parent, or there was an example around I understand now that maybe be far-fetched, so I'll do as you suggest, however dealing with the different breakpoints might be an headache! Do you recommend I transform:scale the item's or change their dimensions along top/left? Thank you so much for your help. P.

Hi there, I'm not an animator by trade, but have been tasked with positioning a series of 7 elements across a "canvas" - in this case a bootstrap container (.blob-container). I've recently worked with GSAP, implementing buttons based on http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/ and have very limited knowledge of it. From the codepen url below would it be possible to position elements from a center position at an angle with GSAP? As such: With a few requirements: - All elements must be keep within the bounds of the container. - On resize it should readjust if needed - If space is not enough, all elements should be scaled accordingly I'm not even sure where to begin to be honest, have tried all sorts of examples from the forum and the webs, but neither is positioning elements on an angle. Thank you so much in advance, if anyone could shed some light on where to start that would be great. Cheers, P.