Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?

I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site:

1. "Making Stagger Reveal Animations for Text": 
https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 
2. "Ideas for Distorted Link Effects on Menus": 
https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html
3. "Animated Custom Cursor Effects": 
https://tympanus.net/Development/AnimatedCustomCursor/index3.html
4. "Text Distortion Effects using Blotter.js": 
https://tympanus.net/Development/TextDistortionEffects/index.html

It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me.

One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. 

Is he correct? Is there a solution?

Thanks for looking.

Adam

2 hours ago, Ad7am said:

I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site:

1. "Making Stagger Reveal Animations for Text": 
https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 
2. "Ideas for Distorted Link Effects on Menus": 
https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html
3. "Animated Custom Cursor Effects": 
https://tympanus.net/Development/AnimatedCustomCursor/index3.html
4. "Text Distortion Effects using Blotter.js": 
https://tympanus.net/Development/TextDistortionEffects/index.html

It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me.

One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. 

Is he correct? Is there a solution?

Thanks for looking.

Adam

Hi, It's 100% possible to add without SERVER SIDE CODING ,it might take a bit time to get it done but it's 100% possible.

10 minutes ago, humxahafeex said:

Hi, It's 100% possible to add without SERVER SIDE CODING ,it might take a bit time to get it done but it's 100% possible.

Excellent. How? 

Hi Ad7am,

I'm currently implementing GSAP animations for a client; you must inject the scripts into the head of the document using the Settings -> Advanced feature (available in Business plan and above apparently), and then add your custom script inside a <script> tag.

One important thing I've noticed: you must wait until the DOM (your site's structure) is completely loaded and parsed for you to reference elements when defining variables. You can achieve this by writing your code inside the following snippet:

window.addEventListener('DOMContentLoaded', () => {
 // write your code here
}

Have you gotten this far yet? Once I finish the implementation I might be able to help you.

On 2/27/2021 at 4:33 PM, itsgus said:

Hi Ad7am,

I'm currently implementing GSAP animations for a client; you must inject the scripts into the head of the document using the Settings -> Advanced feature (available in Business plan and above apparently), and then add your custom script inside a <script> tag.

One important thing I've noticed: you must wait until the DOM (your site's structure) is completely loaded and parsed for you to reference elements when defining variables. You can achieve this by writing your code inside the following snippet:

window.addEventListener('DOMContentLoaded', () => {
 // write your code here
}

Have you gotten this far yet? Once I finish the implementation I might be able to help you.

Not yet. Very interested to see what you do & how you do it.

Hi Ad7am, 

I successfully managed to implement GSAP animations on the client's site. You can see the animations here: 20neLabs site.

• It takes a good knowledge of JavaScript to implement these features
• It would be WAY easier to implement these features if working with a Squarespace 7.0 or legacy project as you can clone the site's code to your local environment and stage changes more quickly
• Working on the Squarespace environment will involve considerable time spent debugging as you have to go back and forth on styles, scripts, etc...
• Your site's full wireframe must be set and done before you begin to work; this is due to Squarespace programatically adding `ids` and `classes` to elements in the DOM, all of which you cannot modify

I've attached a couple of images so you can see what I mean by injecting the scripts and so on.

The first image shows the GSAP library being injected in the document's <head> globally; this is done through the site's dashboard Settings -> Advanced -> Code Injection; the second image is of page-specific code injection in the <head> tag (meaning it will only inject the code in that specific page's <head> tag). Here you can reference elements from the page and add custom scripting code, external references, etc... To access this you click on the page's Settings -> Advanced panel and add your code there.

I hope it helps.

Hi Ad7am,

The site is live: https://20nelabs.com

All the scroll animations are implemented with GSAP using custom JavaScript

If you're looking for fast and simple "scroll reveal" and block animations. You can use ScrollReveal. 

On 3/4/2021 at 5:46 PM, itsgus said:

Hi Ad7am,

The site is live: https://20nelabs.com

All the scroll animations are implemented with GSAP using custom JavaScript

Hi, I am trying to add the following code to have the exact same custom cursor, but I don't know which code I need to copy and where I need to paste onto Squarespace. Any help would be appreciated. Hope you can help me....

https://codepen.io/clementGir/pen/RQqvQx