Jump to content
GreenSock

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

Image Parallax Effect (Translation) with Scrolltrigger

Recommended Posts

Hi everyone,

 

I would like to achieve the following image parallax effect (vertical translation) with Scrolltrigger and without Smooth Scroll.

https://tympanus.net/Tutorials/SmoothScrollAnimations/

 

I tried the parallax demos in the docs, but they work differently then this example.

Which way is the best to get this effect?

 

Thanks

 

Martin

  • Like 1
Link to post
Share on other sites

yes that's a nice effect.

If you look at that page and turn on the developer tools then it looks like the pics are divs with background images and position absolute with a translate transformation. 

 

Link to post
Share on other sites

Yes exactly, that's what I did too. The translation effect is easy to create with GSAP, but what I didn't get done yet, is to get the correct y-value for each image with Scrolltrigger. Does anyone have a working example to show?

Link to post
Share on other sites

Yes, but I want to use Greensocks Scrolltrigger instead, that's why I asked for a solution with Scrolltrigger.

Link to post
Share on other sites

Yes of course you do, i was only trying to be helpful as a better understanding of the original effect provides A deeper insight into how it might be achieved in greensock.
 

Link to post
Share on other sites

Ok thanks, no problem 😃 I will try further - if anyone could provide an example with Scrolltrigger, it would be great!

Link to post
Share on other sites

There are several parallax demos listed in the ScrollTrigger docs that can get you started - particularly the parallax section demo.

 

For this effect specifically, create a container for the image with overflow: hidden, make sure the image is slightly larger than the container, then translate the image by the amount of difference between the height (or some lesser amount if you wish). Attach a ScrollTrigger with the default start and end values and apply scrub: true to it and job done :) 

  • Like 2
Link to post
Share on other sites

Hi Zach,

 

thanks for your fast response! I created a demo on codepen, it basically works, but on specific screen sizes you can see the background color of the container behind the parallax container: 

See the Pen ExKWVdq by holo_back (@holo_back) on CodePen

Link to post
Share on other sites

That just means that your calculations are off for what you want/need. It looks like you're not using the difference between the container's height and the image height like I recommended that you use. Here's what I'd do:

gsap.utils.toArray(".section-parallax .parallax-content").forEach((section, i) => {
  const heightDiff = section.offsetHeight - section.parentElement.offsetHeight;
  
  gsap.fromTo(section,{ 
    y: -heightDiff
  }, {
    scrollTrigger: {
      trigger: section,
      scrub: true
    },
    y: 0,
    ease: "none"
  });
});

 

  • Like 1
Link to post
Share on other sites

You're right! I got your message wrong and therefore my calculation was incorrect.

Thanks a lot! Below the working example for all future visitors :)

 

See the Pen ExKWVdq by holo_back (@holo_back) on CodePen

Link to post
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.

×