GSAP, Locomotive and Scroll Trigger

for using GSAP the first step is to copy the CDN:

//syntax: for Intial Position to Final Position
gsap.to("name of the element", {object -> operation to perform});

//syntax: for Final Position to Intial Position
gsap.from("name of the element", {object -> operation to perform});

// rotate and move elements with a class of "box" 
// ("x" is a shortcut for a translateX() transform)over the course of 1second. 
gsap.to("#box",{
      x:1000,duration:2,delay:1,rotate:360,backgroundColor: "blue"
})
gsap.from("#box1",{
      x:1000,duration:2,delay:1,rotate:360,backgroundColor: "blue"
})

gsap.timeline():

A Timeline is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing.

GSAP scroll trigger:

connect the CDN:

Locomotive JS Library for efficient scroll:

Locomotive JS CDN:

search for locomotive JS CDN and then

after clicking copy the page URL

Locomotive + Scroll Trigger: