Jump to content
Search Community

ScrollTriggered animation on children elements of container animated by gsap

thehaes test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I hope the title didn't confuse you lol :D

 

I have 2 columns in my setup - left one is sticky/fixed (it needs to stay in place) and the right one is long container with text.

Inside left column I have wrapper with dynamic amount of images (so the height of container is dynamic).

What I want is left column to be synced with right column scroll position (so basically when default scroll position reaches bottom of the page then bottom of the right column also touches bottom of viewport). That works fine. 

 

Next, I loop through each image wrapper (which is 100vh) and make them as triggers to animate img inside each wrapper when they enter/exit viewport.

That's the thing I cannot get to work, I imagine it's because the left column is already being manipulated by gsap on a container with position: sticky, so it cannot read the trigger start/end positions correctly. Is there any way to make this work? Maybe some magical option I missed in the docs?

 

I thought about containerAnimation, but it appears it was made with horizontal scroll in mind

See the Pen OJwOeqa by thehaes (@thehaes) on CodePen

Link to comment
Share on other sites

Ok, it's really weird. I noticed it works on codepen, but not on my build 🤔 Need to investigate

--EDIT--

Actually, it's not - I'm so confused lol. It seems the start/end positions are being read incorrectly, not sure about it but it looks like it's animating all images using same trigger, and not separate trigger for each image

Link to comment
Share on other sites

Unfortunately, after trying many times I wasn't able to make it work. It still looks like it's animating every image at the same time instead of each image wrapper acting like trigger for children image.

 

Any idea why? I think I looped through each image correctly. When I turn on markers it seems like positioning is wrong because I'm also moving the left container - is there any way or gsap option to take that into account?

Link to comment
Share on other sites

Hi,

 

Is better to create just one timeline that handles all the translation and rotation and just pin the entire section, or at least is simpler for my thought process TBH.

 

What I did is to pin the entire container. Have a single timeline. Add the right column translation with a specific duration, in this case 2.5 seconds. Why? Because we have 3 images and we want to rotate those images for 0.5 seconds each and translate the images container for 0.5 seconds after each image rotation. The just run a loop for each image rotation and the images wrapper translation.

 

Here is a live example:

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

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Thanks for the pen @Rodrigo!

This works better for me, I just don't want to pin images themselves while they are rotating so it works more like a parallax scroll. I tried to modify your pen and add y: -(window.innerHeight * i) to image rotation tween to make it fake "scroll", but then it works only for 2nd and 3rd images (the first one is still pinning)

Link to comment
Share on other sites

  • Solution

Hi,

 

Just remove that part from the loop, add it to the timeline at 0 seconds and make it's duration the same as the right column's fake scroll:

mainTl.to(rightColumn, {
  ease: "none",
  y: -(rightColumn.scrollHeight - rightColumn.clientHeight),
  duration: 2.5
})
.to(imagesWrapper, {
  ease: "none",
  y: (window.innerHeight - imagesWrapper.clientHeight),
  duration: 2.5,
}, 0);

gsap.set(images, { rotation: 10 });
images.forEach((image, i) => {
  mainTl.to(
    image,
    {
      rotation: -10,
      ease: "none"
    },
    i
  );
});

Hopefully this helps.

Happy Tweening!

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