How to create some parallax effects with GSAP

First, read this article if you are new to GSAP or if you want to know how to use it with Oxygen.

For this tutorial, we need to use GSAP and ScrollTrigger. So we can move and control the parallax while we scroll the page.
In these examples, I will keep the default IDs names, so it's easier to understand where these names come from. But you should, obviously, use proper names.

The easiest way to create a parallax effect on a background image, it's to move it from his top position to his bottom position.
So, for the settings, it's very simple, we set the vertical position to 0:

For the JS code :

gsap.to("#section-3-1219", {
      backgroundPosition: "50% 100%",
      ease: "none",
      scrollTrigger: {
        trigger: "#section-3-1219",
        start: "top bottom",
        end: "bottom top",
        scrub: true
      }
});

First we select the element we want to animate : "#section-3-1219" . It can be an ID or a Class.
We want his background position to go to "50% 0" to "50% 100%". So it will go from the top to the bottom.
For the easing effect, we set it to none, so it will be linear.
That's it for the animation.

Then we have to set up the ScrollTrigger properties.
The trigger is the same element, so we can enter the same ID here.
The animation will start when the top of the section will reach the bottom of the page, and it will end when the bottom of the section will reach the top of the page. It's the default settings but it's important to understand how it works.
The scrub option is set to true, it means that the animation will be linked to the scrollbar.

Note: When you want to animate CSS properties, be sure to camelCase all hyphenated properties. font-size should be fontSize, background-color should be backgroundColor, and here in our example, the background-position becomes backgroundPosition.

For the next effect, we do the opposite. I set the vertical position to 100% and we will move it to 0 (from bottom to top).

gsap.to("#section-10-1219", {
      backgroundPosition: "50% 0%",
      ease: "none",
      scrollTrigger: {
        trigger: "#section-10-1219",
        start: "top bottom",
        end: "bottom top",
        scrub: true
      }
});

How about moving it from right to left ?
So now we set the horizontal position to 0, and we will move it to 100%:

notice the scrub property. Now it's set to 0.5, which will add a little delay to the animation when we scroll.

gsap.to("#section-14-1219", {
      backgroundPosition: "100% 65%",
      ease: "none",
      scrollTrigger: {
        trigger: "#section-14-1219",
        start: "top bottom",
        end: "bottom top",
        scrub: 0.5
      }
});

We can move everything. This time, we don't change the position but the size. And we add a text because why not ;)

And for this text, we just hide it there, in the left:

gsap.to("#section-18-1219", {
      backgroundSize: "400%",
      ease: "none",
      scrollTrigger: {
        trigger: "#section-18-1219",
        start: "top bottom",
        end: "bottom top",
        scrub: 0.5
      }
});

gsap.to("#text_block-20-1219",{
      xPercent:200,
      ease: "none",
      scrollTrigger: {
        trigger: "#section-18-1219",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
      }
});

The following example will work only on desktop mode.
By using the media queries, we can just change or disable the animations for different resolution.

Notice the gsap.from , which this time, will animate from the provided values. So, in mobile mode, the image will look normal.

More info about the matchMedia method : ScrollTrigger.matchMedia()

ScrollTrigger.matchMedia({

    "(min-width: 768px)": function() {

        gsap.from("#leftdiv", {
            backgroundPosition: "100% 50%",
            ease: "none",
            scrollTrigger: {
                trigger: "#sectionparallax",
                start: "top bottom",
                end: "center center",
                scrub: true
            }
        });
        gsap.from("#rightdiv", {
            backgroundPosition: "0% 50%",
            ease: "none",
            scrollTrigger: {
                trigger: "#sectionparallax",
                start: "top bottom",
                end: "center center",
                scrub: true
            }
        });
    }
});

As you can see, just with a few line of Javascript, we can already control so many things.

Don't forget to check that page for more parallax effects with GSAP & ScrollTrigger : https://greensock.com/st-demos/