Jump to content
Search Community

Quick Beginner Question

jSwtch test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I am building a new site and plan to use GSAP to animate some svg in the future. My question is: if I am importing such a large and extensive library should I then use it for every animation on the site? Should I use GSAP over css for simple effects of the DOM.. like opacity on hover? I am more comfortable with the css, but I know I need to learn the GSAP anyway for my other ideas.

 

SO the question is should I use GSAP for everything, or use a combination with css? 

 

Link to comment
Share on other sites

You can use css for simple effects like hover etc. Anything little more complex can use GSAP, as you have a lot more control over your animations.

 

1. I think in general you should use whichever method that makes you write less lines in CSS or JavaScript. For example, a simple hover effect in CSS is perfectly fine. But keep track of your approach otherwise you will end up over complicating things.

2. Any animation that involves sequence of more than one animation should use GSAP.

3. Then there are many examples of people trying to do things in pure CSS, it is fascinating. But I don't think it is worth it, as most people who disable JavaScript don't really care about effects. You will make your life easier by using GSAP for complicated animations.

 

 

  • Like 4
Link to comment
Share on other sites

55 minutes ago, jSwtch said:

I am building a new site and plan to use GSAP to animate some svg in the future. My question is: if I am importing such a large and extensive library

 

Well, you don't need to import anything. Just use a CDN. It's fast, and will be cached on a users browser for a year.

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

 

Like @Sahil said, CSS is fine for simple stuff. But you should also think about the future too. Today you may want hover to change the opacity, but what if you want the hover animation to do something more complicated later on? Would it be better to do it in GSAP to start off with? Well, that's for you to decide. There's is no good answer as it all depends on what you're doing.

 

Personally, I don't really bother that much with CSS animations if I'm using GSAP because most animations are triggered with JavaScript anyways.

  • Like 5
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

Well, you don't need to import anything. Just use a CDN. It's fast, and will be cached on a users browser for a year.


https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

 

Like @Sahil said, CSS is fine for simple stuff. But you should also think about the future too. Today you may want hover to change the opacity, but what if you want the hover animation to do something more complicated later on? Would it be better to do it in GSAP to start off with? Well, that's for you to decide. There's is no good answer as it all depends on what you're doing.

 

Personally, I don't really bother that much with CSS animations if I'm using GSAP because most animations are triggered with JavaScript anyways.

 

 

OK thanks that sheds more light on the issue. I like the idea of having all my animations in one place - use one platform for everything.

 

WRT to cdnjs: I am building a static site with npm, gulp, and webpack, and have already set everything up for GSAP and a few other libraries. I was under the impression that generally want to avoid extra http requests for performance. Could you please comment on this?

Link to comment
Share on other sites

24 minutes ago, jSwtch said:

WRT to cdnjs: I am building a static site with npm, gulp, and webpack, and have already set everything up for GSAP and a few other libraries. I was under the impression that generally want to avoid extra http requests for performance. Could you please comment on this?

 

What's faster, an extra http request and being able to pull something from cache, or downloading a huge bundle? That's a complicated subject, but check out the bundling perf section here. It doesn't talk about CDNs, but same concept, pulling stuff in from cache.

https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5

 

 

 

 

Link to comment
Share on other sites

26 minutes ago, OSUblake said:

 

What's faster, an extra http request and being able to pull something from cache, or downloading a huge bundle? That's a complicated subject, but check out the bundling perf section here. It doesn't talk about CDNs, but same concept, pulling stuff in from cache.

https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5

 

 

 

 

 

Ok thanks. From that I think the key concept is summarized: "ship more granular bundles so that you can retain better cache integrity even in a code base that is changing so your end users can have a fast repeat page load experience".

 

From a practical side, the user likely already has GSAP in cache from visiting a previous site, or it will be stored in cache after visiting my site - so don't make them download the package again. Got it makes sense.

 

So I should link the GSAP to cdnjs, does the same argument apply to jquery? What about less popular vendor scripts. There must be some point where multiple http requests are the bottleneck.

 

Thanks for the replies - I am learning as I go here.

  • Like 1
Link to comment
Share on other sites

I use CDNs for large popular libraries like GSAP and jQuery. For small, or uncommon ones, I usually bundle them with my app or use JSDelivr. JSDelivr is an interesting CDN because it will load from npm, and will allow you to combine all your scripts in a single request.

 

For example, this will load TweenMax, jQuery, and Lodash.

https://cdn.jsdelivr.net/combine/npm/gsap@1.20.3,npm/jquery@3.2.1,npm/lodash@4.17.4

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, OSUblake said:

CSS is fine for simple stuff. But you should also think about the future too. Today you may want hover to change the opacity, but what if you want the hover animation to do something more complicated later on? Would it be better to do it in GSAP to start off with?

 

Of course I totally agree with this - you never know what's going to happen down the road. If you build a bunch of stuff with CSS and then the client is like "oh, could you add this morphing effect right in the middle of that animation" or "please slow down all those animations to 1/10th speed while this modal window pops up, and then resume normal speed when it's dismissed", you're gonna have a really hard time with the CSS. If it's done in GSAP, it's pretty simple to make those changes. 

 

Basically, using GSAP from the get-go gives you more options down the road (and minimal headaches). You may never need those extra options, but at least you've got flexibility. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...