Jump to content
Search Community

Animation not working as expected scrollTrigger

midnightgamer test
Moderator Tag

Recommended Posts

Hi, I am trying to add a sort of infinity scroll but before than I am stuck at the issue. In above pen i have 2 columns each have 16 images in it. I want to see all 16 images as i scroll down but it is not happening. I am pretty sure i using yPercetage is not the solution, but I don't know how to solve this.  And idea how I can convert this into infinity scroll as well?  

See the Pen vYymZbX by midnightgamer (@midnightgamer) on CodePen

Link to comment
Share on other sites

Hey midnightgamer. 

 

7 hours ago, midnightgamer said:

I want to see all 16 images as i scroll down but it is not happening.

It's a logical issue. Look at what your tween is doing: Moving your images by 100 percent of their height. So of course it's not animating enough to view all of the images if some of the images are more than an image's height away from the viewport. You should probably use the entire height/width of the container instead, provided its height/width includes that of all of your images.

 

7 hours ago, midnightgamer said:

how I can convert this into infinity scroll as well?

There's a note about infinite scrolling with ScrollTrigger in the docs which should help you get started. To understand more of the logic about the wrapping, see this thread.

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...