HELP NEEDED. Scrolltrigger & Parallax Headache!

[CreativeRobot 1 Likes (Newbie)]

Hope you have had a great weekend guys  

 

I´ve already done some coding on codepen > using the amazing scroll trigger but I need help to finalize the code and make the scroll trigger & parallax nice and smooth if possible. 

 

Kind regards from Denmark.

 

Question > is it possible for gsap to bend / warp the images as you scroll like on this awesome website?  > https://kacper.ch/ 

Inspirational codepen > 

See the Pen wvMeNee by GreenSock (@GreenSock) on CodePen

 

See the Pen NWvbzdr by ren-winther (@ren-winther) on CodePen

[OSUblake 18,492 Likes (Superhero)]

5 hours ago, CreativeRobot said:

is it possible for gsap to bend / warp the images as you scroll like on this awesome website?

 

GSAP is an animation engine, and doesn't do any rendering. Right now you are using HTML/CSS for rendering. For that warp effect, you would need to use a WebGL renderer like PixiJS or Three.js and probably a custom shader. GSAP could then animate whatever properties your WebGL objects/shader provides.

 

5 hours ago, CreativeRobot said:

I´ve already done some coding on codepen > using the amazing scroll trigger but I need help to finalize the code and make the scroll trigger & parallax nice and smooth if possible. 

 

Just follow the first demo you posted. Notice the use of forEach to create a ScrollTrigger for each element, and how it's getting the duration for each element from a data attribute...

 

<div id="del2" class="delayed-section" data-scrub="0.2">

 

const scrub = gsap.to(imageAnim, {
  progress: 1,
  paused: true,
  ease: "power3",  	
  duration: parseFloat(section.dataset.scrub) || 0.1, // <-- reads data-scrub from element
  overwrite: true
});

 

Using a different duration for each element is what creates the parallax effect.