Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Ad7am

Question


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

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi Ad7am, The site is live: https://20nelabs.com All the scroll animations are implemented with GSAP using custom JavaScript

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

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 the

Posted Images

7 answers to this question

Recommended Posts

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

Link to post
  • 0
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? 

Link to post
  • 0

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.

Link to post
  • 0
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.

Link to post
  • 0

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.

Screen Shot 2021-03-02 at 10.47.13.png

Screen Shot 2021-03-02 at 10.47.47.png

Edited by itsgus
Add external reference to working example
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...