Jump to content
GreenSock

fernandofas

How to include GSAp3 ScrollTrigger in an Express website/app

Recommended Posts

Hi there,

 

I'm wondering if there is already a topic to implement GSAP and Express as I want to use the ScrollTrigger as a lazyload for the images.

 

I'm stuck with some project and as a member, I want to use the plugin for this purpose.

 

Any help will be great.

 

Thank you!!

Link to comment
Share on other sites

The CDN links are not an option? As far as I know whatever you do it will run on the browser.

 

Can you provide more details on the project? Are you using a templating engine for your HTML files? If you do: Which one?

Link to comment
Share on other sites

Hi Rodrigo,

 

I installed npm gsap and not sure how to make it to work on express.

I'm using express and handlebars as a templating engine, but I believe that won't be a problem.

 

My issue here is: Where do I place the animation and how can I make express to run it.

 

It's all foggy to me atm.

 

Thank you.

Link to comment
Share on other sites

Hey Fernando,

 

First keep in mind that Express is simply a server-side library that makes working with Node's HTTP and HTTPS modules quite simple and easy. What express does is receive a request from the browser, takes the Handlebars templates you pass to it, transforms them into HTML documents and send them back to the browser as a response, nothing more. If you want to serve the GSAP files directly from the express server (I don't recommend it), you'll have to setup either Webpack, Browserify, Gulp or some bundler in order to generate a file from the NPM package and add it to the static folder so it can be served at runtime. The best alternative is to add the CDN links to a template partial in order to reference GSAP. This partial should be added before the closing <body> tag ideally, you can also add it to the <header> tag but is less recommendable for JS scripts. Normally when working with templating in Node you'll have partials or something like that, which are static parts of your web app, such as the header tag (with the possible exception of the title or other dynamic tags in it), menu, footer, etc. 

 

Finally to create animations you should create the specific JS file for each page of your app in your static folder and reference them in the specific template in order to add it after the <script> tags that contain all the GSAP files and other libraries you will use in the client-side.

 

To be completely honest I've only worked with Node and Express building APIs with GraphQL and a database, never to create full stack apps using templates (for the front end I normally I use Vue or React), so this are a bit of uncharted waters for me. I've done a couple of simple examples using EJS but checking the docs, handlebars also has partials in it. The only time I used GSAP in node was in a simple app that took SVG files, extracted the paths as cubic beziers and finally store them as JSON files in order to use them in a PIXI app. You'll have to look up in order to find how to add those script tags in the specific template, but at the end of the day that should work in the exact same way as it does in a regular HTML file.

 

Hopefully this helps.

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

As Rodrigo suggests, I recommend loading GSAP via script tags in your templates either from the CDN or from your server (in the case of Club GreenSock plugins). Feel free to ask if you have a specific question. I have some experience serving templates directly from Express (i.e. without a framework like Vue or React).

  • 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.
×