thedamon

(this is from a rain illustration that i want to animate a little.. though also worried about CPUs abit).. It does sound like rotating a group (or groups) and straightening the lines will work a lot more easily.. i'll have to investigate how easily i can do that with the source svgs.. (i'm working with illustrations provided to me but i have a lot of leeway to edit them) I'm wondering if a 'particle creation' approach might serve me a little better here though. Guessing the math way is slope calculation and then projecting that with relative units? I'm curious.. but i'd like to be able to control the rotation easily, so i think rotated groups (possibly dynamically created based on a few templates) will be best

Wondering if there's a "nice" way to move lines along their own angle. I have tried to guess the angle in the codepen, but it's not looking so hot. Also curious.. because I was considering going back to the source SVG and rotating all the source lines to be vertical, then somehow using a rotation while just moving them vertically.. but i'm not sure if that would actually work (unless maybe each path was grouped?)

Thanks @OSUblake that thread looks highly relevant!

I just got the club green package and was trying it out... it works completely fine if I put it in my src folder (i think i may not have tested exactly) the weird thing is that i'm not even importing the files.. just added the dependency and then my dev server stopped working. I've never added a dep via a tarball before, and I do generally use yarn over npm.. not sure if that could cause a difference. I agree that it doesn't really make... any sense at all....... I'll try it in a vue-cli project in a bit (might be a few days) and see if something similarly weird happens.. I can just use the files locally, but I'm not sure how to set things up in order to deploy to netlify from my (hopefully public) github repo.. (i kinda want the code for what i'm working on to be public.. but maybe i can .gitignore the plugins (if i use them in the end not sure yet) and manually include them on the server

I tried the `npm install ./gsap-bonus.tgz` instruction from the docs and in two different projects it stopped my project dev server from working due to unfound dependencies. in a gridsome project, as soon as I add the gsap bonus dependency I get the error: `Cannot find module '../build/Release/sharp.node'` in a parcel.js project, as soon as I add the gsap bonus dependency I get the error: `Cannot find module 'trim-right' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)` both of these errors resolve themselves by removing the gsap dependency from my `package.json` file.

+1 from me, too! Haha I took her frontendmasters course and have followed her on Twitter for a while.. she mentioned that she doesn't usually divide things up into components, which makes sense in most of her (and most people's) work since components are mostly for encapsulation in order to reuse... but since I'm working with an illustrator who isn't myself and am reusing elements between animations, I'm thinking my use case for dividing things up may be more than normal (she also primarily works inside codepen which doesn't lend itself to splitting out files ?) BUT svgs are kinda just themselves and given the sharing of xy coordinates i think separating that out could lead to confusion bc I always need to be grounded inside the overall viewbox (although if everyone's staying in the same layering position i guess they don't need to be part of the same svg...). I think I'm just gonna have to find out by trying!

I'm brand new to GSAP and starting work on a rather complex page that has animation elements shared between a number of 'scenes'... I'm using Vue.js for the page in general and I have a pretty good familiarity with it. What I'm not quite sure about is how component boundaries would affect GSAP running its animations; and if it's likely to cause more problems than its worth and I should just keep each overall animation within one file and treat it as a contained system. My temptation in my capacity as a front-end UI developer is to divide components of the SVG into parts that will generally be treated together: character, sky, setting, thundercloud, etc and make each one a separate Vue component (that way I can define behaviours for each of them and use them within different contexts (ie use the same weather effects in a different scene). Before I get too deep into it though I want to appeal to those who may have worked in this way before (and probably React would behave much the same way given their similarity so experience there may be valuable), as I'm not sure if that will have unintended consequences on how I would write GSAP code, or how well it would work (given that Vue.js is driven by the virtual dom etc).

That definitely looks a few steps easier.. that's what I was hoping for! I had read about svgOrigin but avoided it I think because i only wanted to rotate one part of a complex svg.. but yeah since svgOrigin is set per tween .. that's not actually an issue Thanks!

I made a codepen to demo my issue and ended up solving it function originFromChild(container, center){ const centerBox = center.getBBox(); const box = container.getBBox(); // get absolute center; const centerX = centerBox.x + (centerBox.width / 2); const centerY = centerBox.y + (centerBox.height / 2); // then determine relative to container. return ((centerX - box.x) / (box.width))*100 + '% '+ ((centerY - box.y) / (box.height))*100 + '%'; } // Usage const tOrigin = originFromChild(document.getElementById('sun'), document.getElementById('sun-center')); console.log(tOrigin); TweenMax.to('#sun', 6, {rotation:"360", ease:Linear.easeNone, repeat:-1, transformOrigin: tOrigin}); The question then becomes.. is this a good approach? and is there anything already built in to do this? (also makes me wonder about other utilities I might not want to miss out on) I'm completely new to GSAP and the first thing I tried to do turned out to be more complicated then I had bargained for haha.