Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
CreativeRobot

HELP NEEDED. Scrolltrigger & Parallax Headache!

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×