Jump to content
Search Community

Image Parallax Effect (Translation) with Scrolltrigger

Holo_Back test
Moderator Tag

Recommended Posts

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 comment
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 2
Link to comment
Share on other sites

  • 9 months later...

You can use invalidateOnRefresh and functions to return updated values.

 

gsap.timeline({
  scrollTrigger: {
    trigger: section.parentElement,
    scrub: true,
    invalidateOnRefresh: true
  }})
  .fromTo(section, { 
  y: () => -section.offsetHeight - section.parentElement.offsetHeight        
}, {
  y: 0,
  ease: "none"
});

 

  • Like 4
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.
×
×
  • Create New...