PointC

Yep - the animation is usually easy. (especially with GSAP). Most of the work is in asset prep and organization. I did a post over at CodePen about using the pencil to recreate a font for a handwriting effect. It's pretty much the same technique to create a mask except you don't have to be as precise. A mask has to be close and just enough stroke-width to cover the artwork. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 And the pen that goes with it. Happy tweening.

Hi @Tasty Sites It looks like you copied your original path and used it as a mask. That can work in some situations, but in this case you can see the path is not going in the right direction to make it work. The trick to these masks is creating your original artwork and then creating a separate mask. You line up your artwork and grab the pencil, pen or curvature tool and draw a new path along the middle of the artwork. Then add a stroke thick enough to cover everything. The sharp point in the middle could be problematic, so I think two masks would be better in this case. Here's a fork of your pen: It can be done with one mask, but there is a bit of hiccup on that bottom point. If it's fast enough, you may not notice. If it were my project, I'd go with two masks, but that's just my two cents worth. Hopefully this helps. Happy tweening.

How's this? Dear Microsoft, This has been my experience working with your Edge browser. Please fix it. Thank you.

Hehe. I actually post these tips because at my age I'll almost certainly forget about them and then 12 months from now I'll encounter the same problem. A quick Google search for a solution will lead me right back to my own thread. It's pure genius. Yeah, I also tried each of those methods you listed to get the textLength value from Edge and found the same problem. Filing a bug report is on my list of things to get done.

Hey everyone, I just spent some time fighting with MS Edge so I though I'd post a quick tip about it. I needed to pull some SVG text from a center point and stretch the spacing to the edge of a rectangle. Easy enough I thought. I'll use text-anchor="middle" and tween the textLength to the width of the rectangle. That worked perfectly in Chrome, but Edge wasn't in the mood to play nice. I won't bore you with all the details, but basically Edge will correctly use the middle text anchor for initial setup. However, when you try to animate textLength along with that attribute, it reverts back to text-anchor="start' so the letters won't space apart correctly. They'll all space out from the left. Not good. Edge also has a problem reporting back the textLength for an animation start point. I opted to use the BBox of the text to get a starting point for GSAP to animate the textLength. To overcome the anchor problem, I centered the text BBox and then animated it to x:0 while the textLength animates which will give the illusion of spacing from the center. While on the subject of textLength, I came across another little oddity last week. I often animate SVG text along a textPath by tweening the startOffset attribute, but I thought I'd try adding some textLength with it to space out the letters a bit and found some strangeness. When you set your initial textLength attribute, Firefox only works with that on the actual text element, but Chrome only works with that attribute being set on the textPath element. A bit odd. Here's a quick demo showing the behavior. I used two tweens on the timeline so you can easily comment out either if you want to see the weirdness. The animation along the path works no matter what, but the textLength attribute placement is a bit fussy between Chrome and FF. Of course, Edge doesn't work at all no matter where you put the attribute. Big surprise. It will animate along a path just fine, but when you use a textPath element it doesn't seem to care about textLength. Hopefully this helps anyone trying to do some interesting SVG text animations. If anyone needs me I'll be over at the MS campus protesting their fussy browsers. Happy tweening everybody.

There goes @GreenSock again -- GreenShocking the community by whipping up new functions and dropping them into the forum like it's nothing. I can honestly say I've never even thought about animating from contain to cover, but this is pretty darn cool.

Hi @SoldierCorp Welcome to the forum. You can also turn that into a loop to tidy things a bit. Doing that would also give you the option of creating a separate timeline for each group and the first one could restart before the last one ends to create even more of a 'wave' feel. Just my two cents worth. Happy tweening and welcome aboard.

You know, the problem here is there are just too many cool things available in GSAP.

Hi @mrtips I'm not sure what your final project will be doing, but here's a slightly different take on your request. By using Draggable's endX and endY I have one div chase another after you throw the first one. I'm not sure if that'll be helpful for what you're doing, but thought I'd throw it out there as an option. Since you're a Club GreenSock member (thank you), you also have access to the ThrowProps plugin which has a cool velocity tracker if that is part of your master vision. More info: https://greensock.com/docs/Plugins/ThrowPropsPlugin https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.getVelocity() Hopefully that helps. Happy tweening.

Always good info from the Oracle of CSS. This is one of those things that should be so simple, but is made into Mission Impossible. It reminds me of vertically centering something back in the day. It took a team of 16 people working 12 hours shifts for 6-8 weeks to vertically center some content in a div.

Yeah - I'm with @Carl here. I'm not really understanding the question. I think you want the buttons on the left to trigger their opacity when the corresponding section hits a certain point? You're combining some jQuery toggles with ScrollMagic .setClassToggle and GSAP window scroll tweens. I had trouble following the demo with all that. One thing that does stick out and is causing an error is your triggerHook in the global scene options. You have triggerHook: ".topic-wrapper", but that is not a valid value. I'm not sure you need the duration in there either since you're just toggling classes. I think something like this would work better: var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0.1, offset: 100, reverse: true } }); As Carl mentioned, you'll probably have better luck on the ScrollMagic forum. If you want to simplify your demo a bit and use GSAP for everything we can probably offer some additional guidance about the GreenSock elements of your project. Happy tweening.

The Good Sir @Jonathan is a wizard with carousels. Here's one that can probably lead you to a solution. Happy tweening.

You can't have that console.log() sitting in the middle of your ScrollMagic code like that. Remove it and you should be just fine. If you have other questions, please provide a CodePen demo. Here's some info about creating one. You're using a really old version of TweenMax (almost 4 years) so I'd also recommend switching to the latest version (1.20.4). Happy tweening.

Haha - I'm busted. A few months ago I was designing something and meant to type 10 in the dash length, but missed the 1 and found the circles by accident. I've been meaning to make some demos and type this up for the GS community ever since then, but kept pushing it to the back burner until now. Thanks for the canvas conversion. I think that will help some people.

Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.

Hi @Bembe Welcome to the forum. It sounds to me like you're looking for the TweenMax.ticker. https://greensock.com/docs/TweenMax/static.ticker Hopefully that helps. Happy tweening.

I thinks it's good you posted your experience because this has been the issue in several threads. I just answered one a few days ago about an infinite tween in a timeline which works perfectly in 1.20.0 or later, but the OP was using the /latest/ so it wasn't working correctly. Sorry about your lousy morning, but thanks for pointing others to a solution. Happy tweening.

Sorry - that's my fault. I dropped those yoyos on the tweens and restarted from the 'back' label. I think you wanted to replay from the start label. How's this?

Hi @ajando Welcome to the forum and thanks for being a member of Club GreenSock. I'm not sure I completely understand the desired outcome. Should the rings draw and then the wavy/bulge part repeats? Like this? Or did you mean the waves would yoyo once and then the whole timeline repeats? I wasn't quite sure. Hopefully that helps. Happy tweening and welcome aboard.

Hi @ceindeg Edge is being a bit fussy lately with masks. If you add a tiny rotation to the tween, it'll force Edge to redraw the mask. Something like this. tl.from(".mask-anim", 2, {ease: Power4.easeOut, rotation:-90.01, drawSVG:"0%"}, 0.3); This is actually the same odd issue we were discussing in this thread. Hopefully that helps. Happy tweening.

Hi @Tissi_2 Welcome to the forum. I'm not 100% sure what the overall question is here, but it sounds like you're just trying to make your site faster on mobile? Do you mean it's loading slowly or animation performance is not good on mobile? I'm not seeing much animation beyond some opacity changes on your site. GSAP is certainly a great choice for animation, but your assets could be a bottleneck. You have to remember that GSAP is animating the values, but doesn't do any of the rendering. That's all done by the browser. You could certainly use PIXI if you like. In answer to your question - yes, you will need Pixi.js to use the GSAP Pixi plugin. There are some nice examples on the plugins doc page here: https://greensock.com/?product-plugin=js-pixiplugin You can also search the forum for Pixi and you'll find several threads with good examples. My two cents worth though, Pixi might be overkill for what you need and you'd also be loading another library so that may not help your mobile performance either. From what I'm seeing, you're trying to shift some of the images from green --> red --> blue. I think I'd recommend a simple CSS hue-rotate() filter. That would probably work fine. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter You could also keep the animation as you have it now and use GSAP instead of CSS transitions for the opacity changes in the images too. It sure won't hurt to try it for comparison. Regarding the documentation, if you have a specific idea about ways to improve them, you're welcome to submit it. To help you get going with GSAP, there is an excellent learning section here: https://greensock.com/learning Hopefully that gets you started. Happy tweening.

Haha! Perfection. Each time it's used a modal pops up and says: "Boom! You've been GreenShocked!" I think all the emojis should have a cool green tint like that.

@Shaun Gorneau - That's known as GreenShock.

Hi @TRIPLESENSE REPLY I'm not aware of any callback that includes onDrag and onThrowUpdate - so - yes, use both with the same function. Happy tweening.

Bendy Box isn't an official GreenSock tool yet. I'm not sure if @GreenSock will release it or not as there are other higher priorities right now. You can accomplish some of the same things with the MorphSVG plugin though. Happy tweening.