itsgus
-
Posts
3 -
Joined
-
Last visited
itsgus's Achievements
-
failbetter reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Wolfsilon reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Beyondspace reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Beyondspace reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Ad7am reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Hi Ad7am, The site is live: https://20nelabs.com All the scroll animations are implemented with GSAP using custom JavaScript- 8 replies
-
- 3
-
-
- javascript
- css
- (and 1 more)
-
Ad7am reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
itsgus changed their profile photo
-
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.
- 8 replies
-
- 2
-
-
- javascript
- css
- (and 1 more)
-
itsgus reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Ad7am reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Beyondspace reacted to a post in a topic:
Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
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.
- 8 replies
-
- 3
-
-
- javascript
- css
- (and 1 more)
