Jump to content
Search Community

About Angular plus GSAP

mosk 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 was thinking about learning Angular and NodeJS, since I'd like to take advantage of the features for a single page app. But I also want to use GSAP for my animation, and I'm not eager to commit the time and effort to learning Angular and NodeJS if I'm likely to run into lots of obstacles when I try to implement GSAP.  

 

I've read this article: https://medium.com/@philipf5/patterns-for-using-greensock-in-angular-9ec5edf713fb from about 9 months ago.

Was wondering what the current state of affairs was between GSAP and Angular and whether or not improved / easier integration was in the works.

 

Would love to take advantage of everything together, but I don't have a background in programming, and while I don't mind diving into new platforms, i do have to allocate my time and don't want to bite off more than I can chew.  

The site I'd like to (re) build is graphics rich, with customized images along the left serving as primary navigation buttons.

Depending which section is chosen, an additional set of images would appear on the right of the screen to serve as nav buttons within that section.

And depending upon which of those were selected, an additional row of nav buttons could appear at the bottom, giving access to further subsections within that particular subsection.

 

Each button triggers a primary / secondary / or tertiary sign to dropping down from the top to show user what section (or subsection or sub-subsection) they're now in - and I'd like to avoid having to reload the navigation buttons/signposts on every page (hence consideration of single page app).  Originally this was built in Flash on the Gaia framework (which allowed creation of single page app) - and now I'm trying to rebuild with HTML 5 / JS / CSS.

 

If Angular plus GSAP is likely to present ongoing challenges/difficulties, I could potentially build things where each main section becomes a single page, and I could use GSAP to handle all of its sections and subsections (animating buttons around, swapping out images and text based on selected subsections) - and that would mean I'd only have to reload nav buttons and signs when going between main sections (not a single page app, but maybe 6 main 'pages' rather than 50ish pages once all the sections and subsections are included.

 

Would welcome any suggestions in how to approach this in a manner that allows me to fully take advantage of GSAP. Thanks.

Link to comment
Share on other sites

 

mikel and GreenSock reacted to this
Like

 

Follow me on...

Twitter • CodePen • Plunker

team_badge-moderator.png
OSUblake

OSUblake - thank you for the recommendation (and for your input throughout these forums) 
I'm taking a look at Vue now, but was hoping you could clarify a few things:

 1) Is Greensock more easily integrated into a Vue based single page app than an Angular single page app?

2) Do you have to take special steps to use Greensock with Vue, since vue also uses a virtual DOM - or would Greensock just work as it does on static sites with multiple .html pages?

3) When you say 'GSAP works fine with Angular' - is that only for people with the coding chops to do a lot of troubleshooting, or would it be relatively simple to get GSAP and Angular working well together if I invested the time to learn the Angular framework?

Thank you!

 

Link to comment
Share on other sites

52 minutes ago, mosk said:

Is Greensock more easily integrated into a Vue based single page app than an Angular single page app?

 

There really is no integration as GSAP is a library. You call it when you need it, so it should work with whatever you're using. Check out the learning section and docs. GSAP's API is going to be the same whether you're using Vue or Angular.

 

 

58 minutes ago, mosk said:

Do you have to take special steps to use Greensock with Vue, since vue also uses a virtual DOM - or would Greensock just work as it does on static sites with multiple .html pages?

 

Don't worry about a "virtual DOM". That term just confuses people. With frameworks like Angular and Vue, you interact with elements through some kind of reference (refs) variable.

 

refs for Vue

https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

 

refs for Angular

https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af

 

1 hour ago, mosk said:

When you say 'GSAP works fine with Angular' - is that only for people with the coding chops to do a lot of troubleshooting, or would it be relatively simple to get GSAP and Angular working well together if I invested the time to learn the Angular framework?

 

 

Again, GSAP will work with whatever you end up using, and GSAP's API is very easy. 

 

The big thing is this. Before you can use GSAP, you need to build something first. I just think it's going to be faster and easier using Vue if you have limited programming experience. Angular is a very large framework that uses TypeScript, which is not an easy language to start out with, and Angular has also been known to cause problems when building.

 

For new people, I just think that Angular's learning curve is going to be much higher than Vue or even React.

https://reactjs.org

 

 

  • Like 2
Link to comment
Share on other sites

ok - thanks for the explanation and links.

Will spend some time learning Vue then try to get it working with GSAP.

 

Is there a way to share things on codepen when Vue is in the picture? Are there specific steps I would need to take? Or would I just need to build a dummy site  and link to that if i have problems / questions? 

 

Link to comment
Share on other sites

30 minutes ago, mosk said:

Is there a way to share things on codepen when Vue is in the picture? Are there specific steps I would need to take? Or would I just need to build a dummy site  and link to that if i have problems / questions? 

 

Just add GSAP and Vue to a CodePen, StackBlitz, or CodeSandbox demo, and share the link.

 

I think checking out some of Sarah Drasner's stuff on CSS tricks might help you out.

https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

https://css-tricks.com/intro-to-vue-5-animations/

 

And maybe this article

https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

 

  • Like 1
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...