To get GSAP running in Squarespace with interesting code example

Why use GSAP

GSAP (GreenSock Animation Platform) allows you to create complex animations quite easily. It gives you a lot more freedom and flexibility to create precisely the animation you want. We have a good bit of experience of GSAP because we use it extensively in our Squarespace templates. Gsap has many additional plugins which extend it even further, such as animating SVG and morphing one object into another. Gsap is the web developers' choice for advanced animations on the web.

If it's just a simple animation you want to create, then use CSS Transitions or CSS Animations. They are easier to implement as you will be writing JavaScript to get GSAP to work, and whilst it isn't rocket science, writing JavaScript for the first time is a little daunting. As a level of barometer, if you comfortable writing some intermediate CSS code like using :has or nested selectors then you should get up and running with GSAP in no time. If, on the other hand, you spend 30 minutes spotting a quote mark that is missing, then I would keep learning CSS until you are more comfortable and then dip your toes into GSAP in Squarespace.

I blogged about using CSS View Transitions in Squarespace. If you are interested in adding yet another brilliant addition and animation to your sites, then definitely check that out.

Under the hood, GSAP technically utilises CSS animation anyway. The reason for this is performance; CSS animations are robust and incredibly well-engineered. Raw JavaScript animations are nothing as performant as CSS, which is why GSAP relies on CSS animations. You don't need to know or understand this paragraph; it's just that GSAP is built well-coded and won't slow down your browser.

Getting GSAP code running into Squarespace:

Copy and paste this into Website > Pages > Website Tools > Code Injection > Footer.

<style>
#block-yui_3_17_2_1_1736500917254_14662 img{ max-width:100%; margin:0 auto; display:block; width: var(--iWidth); }
</style>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426"></script>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>

<script>

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
 toggleActions: "play none reverse none",
});

let mm = gsap.matchMedia();
// add a media query.
mm.add("(min-width: 1024px)", () => {

let tl2 = gsap.timeline({
 scrollTrigger: {
 trigger: "#block-yui_3_17_2_1_1736500917254_14662",
 start: "top bottom",
 end:"top center",
 scrub:true
 }
})

tl2.fromTo("html", {"--iWidth": "10%"}, {"--iWidth": "100%", duration: 1});

}); // end media query
</script>

There are a few bits to this code, but get this working, and you are very much on your way to creating stunning and unique animations using the industry-standard web animation tool.

Here are some of the main steps to getting this working within your Squarespace site.

1. Grab the ID of the block where your image is within with this handy Chrome plugin.
2. Include two scripts: the main GSAP script and the ScrollTrigger plugin.
3. We are using a media query here, so this animation doesn't run with a user's screen of less than 1024 pixels.
4. The ScrollTrigger part is the complicated section here. As with most code you are working with, it's not a 'foreign' language when you break it down. You are referencing the block you grabbed from the Chrome plugin (mentioned above). Then, you are saying you want the top of the image to start when it reaches the bottom of the view. You also set the end of the animation to be when the top of the image reaches the centre of the browser. When you break it down like that, it makes a little more sense, right?
5. The 'iWidth' is a CSS variable; it corresponds with the same variable in the CSS which you included at the top of the file.

Summary

Sure, this code is a little daunting if you haven't written JavaScript before, but as your GSAP skills grow, you will find that you are using the same bits of code over and over, and you really are just modifying slight pieces of that JavaScript.

The people over at the GSAP forums are very helpful and I highly recommend that you go over there if you have any problems. The docs are also very helpful.

If you do have any issues that you want me to look at, hit me up on X/Twitter.