Old Dog, New Tricks?

[Doug Dodge]

Hi Folks! 

 

So, yeah, an 'old dog' here. I've been in the field for >30 years, mainly on the back end of things with data-related chores - growing mushrooms. LOL Recently I decided, after 3-4 years of 5:30 AM --> 1:30 AM work I am taking a break to brush up on my skillset(s). I am having an absolute blast! Especially with the graphics-related issues. Great challenges. I hope all of you, after as many years, will have the same conclusion. Life's too short not to.

 

OK, now all the gushy stuff is over here's what I am hoping you might do; provide a bit of your advice for a few questions I have to help me 'get' the big picture as you see it. My website is dataminders.com. It is incomplete as I have been using it to learn, which is fine given that the boss is a good guy. WP , SmartSlider 3, Back & forth between Elementor & GeneratePress and looking at ThriveThemes. com offerings. 

 

• All images SVG except the one MP4 water.
• A sailing ship becomes visible, filling the whole screen & ends up at 75% opacity.
• Several layers of text appear all positioned properly. Anchor points I am thinking?
• On another screen, the text does a reverse text-to-dust transition.
• Control over positioning, currently bottom-right.
• Scaling next.

 

So, my basic question and goal would be to use as few libraries as possible overall. My hope is that I can do everything with the GereenSock product as my research finds it at the top of the proverbial heap for all-things-graphic.  Anything else I'd like to write in javascript for the learning experience. My current 'nit' is the extra height I still have after a dynamic resize. So, I thought the time was right to ask here. I had a bit of trouble finding some answers online at this site but also thought that you'd expect folks to not be as green as I am. I'd love to provide feedback as I am totally new at this and will ask all the dumb question and I was thinking that if I could send these somewhere maybe that will pay a little back for all the pain.  

 

I guess I'm asking for a few bits of condensed wisdom that will aid me in sorting through all the noise out there. I'd like to have as little learning time going down dead-end paths as possible and was hoping you guys might have a bit of friendly advice. And, of course, I'd dearly love to help anyone in return. 

 

Thanks,

 

Doug

 

[GreenSock]

Howdy Doug. Welcome aboard! My hat's off to you for >30 years in the business. Did they have computers back that far?

 

I read your post a few times and I'm struggling to understand what your GSAP-specific question is here. How can we help? If you could boil it down as succinctly as possible, that'd be swell. It doesn't look like your site is using GSAP at all yet (not even loading it). No problem - just a little confused about what you're asking. 

 

Have you already been through the Getting Started page/video? https://greensock.com/get-started-js/ 

[Doug Dodge]

Hi Jack,

 

Thank you for your kind words. I'll ignore your smartass question until the end of this reply.  

 

Yeah, well, see what all those years will do to your brain?  Let me see if I can't rephrase the question. I was a little vague but I did say I was expecting to ask some dumb questions.  I am unfamiliar with both GreenSock and the general state of affairs in the sense that I also don't quite yet know the right questions I'd need to ask. Essentially, I am looking for boundaries and best practices for developing inside of those boundaries. There appear to be a lot of competing products in each area (and a ton of folks who seem to be ripping off the ideas of others which I have little tolerance for - this is hard work and folks should get a fair shake and not have someone steal their intellectual property) and I was wondering what you, and the others might suggest.  Let me try this;

 

Two dots and a dash.  Where am I? Where do I need to go? And what's the shortest route there? I know where I am (or not as the case may be. )  I was wondering if you had any guidance on both the "where" issue and the "how" part? And that's why the question was vague. So, other than GreenSock, in order to have the best set of tools, with an emphasis on javascript and with a desire to carry as little unneeded extra baggage, what should someone like myself look at? I enjoy this stuff but want to get up to speed as quickly as possible and waste as few moves as well and advice from folks like yourself is valuable. 

 

Specifically with GreenSock, am I able to have full control over all image-related content? If so, I am currently interested in exact dimension size and placement control. After that, I am interested in the timeline approach but I expect that will be pretty easy from what I've read so far.

 

 So, just interested in where I can find this in your documentation or would the forum be best? I can always circle around for anything specific I can't figure out on my own. 

 

Now, with respect to the comment on whether or not computers existed when I was a kid. Why, yes, they did. They were called 'fingers', 'paper', and these funny yellow things called 'pencils'  and they worked in both directions - uphill. In the snow. And we didn't have shoes. No erasers though. We ate those. We put men on the moon with a computer with around 64KB RAM and that ran at something like 0.043Mhz. Those guys put men on the moon with that stuff. A total set of onions in my book.  I really appreciate that you feel comfortable enough to throw that load of poo at me.  Made me laugh and made my day. I consider that a high honor. 

 

On a little more serious note, and I will come right out and say it, is that I have looked at your product and have been impressed a lot by it and I decided I'd toss my hat in the GreenSock ring. Statistically speaking I don't have as much time left to learn and help others so I want to get right to it. I just wanted your candid opinion of where any 'holes' might still be and what should I use in that case?

 

You are correct, my site is not currently using GreenSock. It will as soon as I complete my due diligence and am comfortable I have all my bases covered. For example, I got that background MP4 file down from 49MB to 731KB and I only want the best and I think your product is good enough. 

 

Yes, I did watch that video and about 15 others on YouTube. 

 

 

[Carl]

Hi Doug,

 

One thing to keep in mind is that GSAP at its core is a property manipulator. It can change numeric properties on objects over time very quickly with extreme accuracy.

 

The properties it can animate can be

• the color of some text
• the position of basically anything
• the background color of an HTML element
• the border-radius of an HTML element
• the rotationX of an HTML element
• the path data of an svg <path>
• the stroke-width of an svg stroke
• the position of camera in a 3D scene (three.js)
• the velocity of wind that is blowing 10,000 flakes of snow
• the amount of blur in an image
• the amount of drop-shadow on an image

and literally 1000's of other numerical values that may affect how an object appears.

 

I think what you will have to answer for yourself is what rendering and layout toolset you want to invest your time in.

GSAP can animate these types of properties on regular HTML elements (and their css properties), SVG elements, and lots of things that happen in HTML <canvas>.

 

If you want to live beyond the restrictions of "web standards" and all the quirks you find with browser and css, you may want to just do everything on HTML5 canvas and use a library like pixi.js  Pixi is a super fast canvas rendering library and you can use GSAP to animate pixi objects and filters.

Blake does a ton with it, just look through his demos: https://codepen.io/osublake/pens/public/

official pixi demos: http://pixijs.io/examples/#/demos/animatedsprite-demo.js

 

 

There is also Three.js if you want to do great stuff with GSAP in 3D

See the Pen NqaPJN?q=three.js%2520gsap%26order=popularity%26depth=everything%26show_forks=false by BrianSipple (@BrianSipple) on CodePen

 

See the Pen dILAG by zadvorsky (@zadvorsky) on CodePen

 

If you like working with vector art then SVG may be the right choice.

Chris Gannon has made a career out of animating SVG with GSAP: https://codepen.io/chrisgannon/

 

If you want to build modern websites that are responsive and give you full control over layout, you probably want to spend a few weeks learning about CSS grid and Flexbox

 

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

The reality is there is no "one best solution" and there are a ridiculous amount of options. The good news is that GSAP can pretty much animate anything, its just up to you to figure out which tools give you the best control over the layout your need and type of artwork you will be working with.

 

 

 

 

 

 

 

 

 

 

 

[Dipscom]

If I may chime in myself...

 

Hi @Doug Dodge, welcome to the forums!

 

 

8 hours ago, GreenSock said:

Howdy Doug. Welcome aboard! My hat's off to you for >30 years in the business. Did they have computers back that far?

 

Oh Mighty CODEGOD! This heathen knows you know, this one is only trying to enlighten the lost ones that might not be aware, as you are in your infinite knowledge. For other mortals: here's a picture of the old computers NASA used back in the day, not that I claim to be this old...

 

 

For the youngsters around - I mean, people born when I was 18 are now adults, sheesh... - Here's a little more info: https://crgis.ndc.nasa.gov/historic/Human_Computers

 

Building up on what @Carl said:

 

There are so many ways of achieving the same end result that it's worthless trying to find out the best one. I am aware you said you are pressed for time but still, I would say the best course of action would be for you to focus less on what library to use and get really, really good at the underlying technology. In the case of the web, it's the browsers, HTML, CSS and JavaScript.

 

The browser because that's the environment your app/site is going to be presented and each browser has its quirks. Also understanding the limitations and capabilities of the browser can be a great help. I only recently learnt that the browsers come with basic speech recognition - How amazing is that? There are tons of other things browsers do that you could leverage.

 

Really knowing HTML, CSS and JavaScript is essential if you want to make the most of your site. Don't go down and try to read the spec, it's not great fun. But do focus on the language, not on libraries. Then, as you learn the good, the bad and the ugly of each language, you will understand when and which library/framework to use.

 

Another thing is, JavaScript for better or for worse is the way to manipulate anything inside the browser. With it you can manipulate all data inside your page, be it images, video, audio, the DOM and so on. Then, you can use GSAP to tween any of those values to your heart's content.

 

Once again, welcome. May you have fun learning. And be sure to come back, share your experience and hopefully, in time, start helping others as well.

 

 

[Doug Dodge]

@Carl, that is so perfect! Thank you kindly. (Old guy talk for "What's up, yo?") You provided me the perspective (pun definitely intended ) I needed. I will view the suggested videos. Thank you

 

@Dipscom, not sure how to "upvote" folks here yet but the both of you get one. I do intend to wring out javascript as you suggested. My goal of getting to the heart of the matter has been achieved which I am anticipating will yield greater focus efficiencies. With respect to helping others, I intend to so do. I've started by impressing on folks the notion, "I don't want to be like that guy!" and, no doubt have, in so doing, saved thousands. LOL OK, well, maybe impress on them that being a dumb*** actually IS worse than being a smart***.

[Dipscom]

There's a little heart button at the bottom right of each post... Some of us are suckers for those little trophies and hearts... 

[GreenSock]

Yep, @Carl and @Dipscom nailed it. Hopefully this gets you going in the right direction. Let us know if you need anything else. 

 

And keep in mind that my tongue-in-cheek comment about having computers 30 years ago was coming from a pretty old guy too Not quite 30 years in the industry yet, but I'm gettin' there. Fear not - I've learned to respect my elders   

 

Happy animating!

[Doug Dodge]

Thanks! And mind yourself sonnie!  

 

The funny thing about that is that whole age thing is that while I was getting up @ 4:00 - 4:30 here a year ago or so, and on many days working until 1-2:30 with one or two overnighters, my younger colleagues were all whining at how tired they were. And, while doing that I moved some 15 tons of materials in my yard building this. I have more but they're too large currently.

[GreenSock]

Are you sure you're human? Perhaps you were born on Krypton?

[Dipscom]

7 minutes ago, GreenSock said:

Are you sure you're human?

 

Regardless of the answer, he wouldn't be the first one...

 

This place is visited by CODEGODS (yourself), DemiCodeGods (@Carl), Artificial Inteligences (@Jonathan), The BlakeTrix (@OSUblake), Ninjas (@Rodrigo), Clowns (@Dipscom), nice guys (@PointC) and @Diaco...

 

What difference would a being from the Dawn Of Time make in a forum with such population?

[PointC]

hmmmm... @Dipscom has tagged me into this thread and labeled me as 'the nice guy'. That makes me sound a bit boring. Perhaps I should up my snark game and I could be called into threads without demos. 

 

PS @Doug Dodge - welcome aboard. I think you'll find this to be an awesome group of people. 

 

[Doug Dodge]

More like a cockroach. You can't kill the dang things.

 

@PointC (Craig) - Thank you for the kind words. Appreciated. The matter between you and @Dipscom (a.k.a. PT - Yes, I know how to find my way around) is between the two of you.  

 

I've been an online citizen since the late 70's when we'd dial up a BBS, drop a question and log off. Dial back later, check messages, rinse and repeat. I honestly don't know why this has always fascinated me but I remember waaaay back a neighbor across the street had one of his ham radio buddies, I think in Germany, send me a teletype "hello". So cool.

 

I'll provide the details at some point but when my wife and I went through an extremely difficult time my online friends were there. Lots of fun stories - for later.

 

 

[Dipscom]

14 minutes ago, PointC said:

. I think you'll find this to be an awesome group of people. 

 

"People"... I'd say collective assortment of singularities.

 

Right, bedtime here. Some of us here still need sleep. Unlike some Douges that only need 2 hours per night and can lift 15 tonnes in one go, allegedly...