Quick plugin verification, please

[ladlon]

Hi.  I just wanted to get a quick clarification...

 

I want to use xPercent, which I understand is provided via the CSS plugin.  But, I'm a bit confused about some little things...

 

1) I've seen 'the CSS plugin' referred to 'CSSPlugin', whereas the (current) batch of 'core' plugins has CSSRulesPlugin only.  I'm assuming that's the same thing?

 

2) In order to use the plugin, the documentation says to simply load the core.  I was uncertain if that was just the gsap.min.jp file you can CDN via the link provided on Greensock's front page contains ALL the core files (that, for example, you'd find in the minified folder of the local version), or if you have to do a CDN for the individual js files as well.  (I assumed the CDN contains all of them)

 

Sorry, I just wasn't sure, and I wanted to verify it.

[PointC]

The CSS plugin and cssRule plugin are two different things. The former is loaded with gsap core while the latter needs to be loaded separately. As I mentioned in the other thread, you can check the handy chart on the docs page to see which plugins, eases and utility methods are loaded with the core.

https://greensock.com/docs/

 

This link has all the available CDN files you can use. 

https://cdnjs.com/libraries/gsap

 

Club plugins are not available from a CDN. You need to host them yourself.

 

Make sense? Happy tweening.

 

 

 

 

[ladlon]

Thanks for the clarification.  Ya, that question was based on that actual chart.  I was just misunderstanding it, as I was confusing the 'GSAP core' with the GSAP file (the first item listed in the chart).

 

Yep, makes sense.  As usual, just a simple misinterpretation on my part.  I've gone through much of the documentation and videos before even starting my tinkering... I'm just still getting used to some of the interpretations, and battling my own assumptions/undersandings.

 

(Probably didn't help that one of the videos I was referencing from is MANY years old!)

[PointC]

Yep - anything in the green outline on that chart is loaded with the core. No need to load anything separately. Those are the most common plugins and eases you'll probably use on a daily basis. When you start to need more, you just load the individual plugins and eases you may need. After that, you join Club GreenSock and get access to all the super cool time-saving plugins.

 

Happy tweening.

[ladlon]

In retrospect, the chart totally makes sense to me.  Just kind of interpreted it wrong.  (Shrug)

 

Thanks for your patience with my stumbling around with this.  I like to deep dive into things quick!

[PointC]

No worries. I understand the excitement. 

 

IMHO the best way to really start learning (after the intro videos) is to make some demos. Find an animation you like and try to recreate it. Or fork a demo and rip it down to the studs and see how it was built. No better teacher than a real world project.

 

[ladlon]

Yep, the test project I've been working on is actually my real website front page.  Within the first day, I had my 'sprite' image on my website randomly bobbing and rotating overtop the background image (position:relative to allow overlaying), which was what I was after.  I'm finding GSAP quite logical and easy to learn.  Just stumbling on simple things initially, like putting things in quotes when I shouldn't, or vice versa.... and the usual little typos.

 

It's been complicated a bit by the animations having to be within a responsive Bootstrap column... and I was attacking CSS relative positioning for the first time, in order to put the 'sprite' overtop of the first (background scene) image.

 

Over the last half hour or so, I was puzzled by the seemingly random placement I was getting using xPercent... but I just found a great video explaining it (IHateTomatoes video series), so that should be cleared up soon.

 

It's not related to GSAP, but one thing I have to nail down is having multiple 'overlay' objects (position:relative) overtop of a 'background' image... within a responsive column.  For one thing, I was unsure if EACH object was relative to the 'background' image... or each is relative to the one defined before it... which would explain why the position values are not what I'd expect.

 

But, this is only day 2, so I have to be patient and keep studying...