GSAP Animation with Locomotive Scroll: Smooth Scrolling and Pinning

This code uses GSAP and Locomotive Scroll to create an animation where an element moves from '150px' to '250px' over 1 second, and then gets pinned and scrubbed while scrolling.

let tli = gsap.timeline({defaults:{ease:'none'}})
	.to('.carpng', {left:'250px', duration:1})


ScrollTrigger.create({
	trigger:'.carpng',
	start:'0%',
	end:'+=400',
	scroller:'.scrollContainer',
	animation:tli,
	scrub:true,
	pin:true
})

The code first sets up a GSAP timeline that animates the '.carpng' element to the right by '100px' over 1 second.

Then, a ScrollTrigger is created to control the animation based on scrolling. It's set up to:

• Trigger: '.carpng' (the element to be animated)
• Start: '0%' (animation starts when the element enters the viewport)
• End: '+=400' (animation ends 400 pixels after the element enters the viewport)
• Scroller: '.scrollContainer' (the scrollable container)
• Animation: tli (the GSAP timeline)
• Scrub: true (smoothly transitions the animation based on scroll position)
• Pin: true (the element is pinned to the viewport during the animation)

You can adjust the 'start' and 'end' values to fine-tune the animation based on your design needs.