Jump to content
Search Community

Vertical section animation with pin

RubberFruit test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

 

Hi guys! I'm trying to make a copy of the vertically scrolling section from https://www.luminartech.com/ (section 5 in a row).

 

I can't figure out why my text on the right is scrolling so fast and can you help / hint how to implement such a cool card change on the right? Thank you very much in advance!

See the Pen vYVwzbN by rubberfruits (@rubberfruits) on CodePen

Link to comment
Share on other sites

Hi,

 

The problem is in the logic of your loop. Basically you're setting the start position of the elements and then moving them out of the visible section in one motion with no pause between them.

 

This seems to work the way you intend:

$verticalTextItems.each((index, item) => {
  gsap.set(item, {
    yPercent: index === 0 ? 0 : 100,
    opacity: index === 0 ? 1 : 0
  });

  if ($verticalTextItems[index + 1]) {
    timeline.to(item, {
      yPercent: -100,
      opacity: 0,
    }, "+=0.5")
      .to($verticalTextItems[index + 1], {
      yPercent: 0,
      opacity: 1,
    }, "<")
  }
});

Also there is no need to set the yPercent to anything above 100 in the set instance since you have absolute positioned elements. Pushing them beyond that point has no effect.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

8 hours ago, Rodrigo said:

Hi,

 

The problem is in the logic of your loop. Basically you're setting the start position of the elements and then moving them out of the visible section in one motion with no pause between them.

 

This seems to work the way you intend:

$verticalTextItems.each((index, item) => {
  gsap.set(item, {
    yPercent: index === 0 ? 0 : 100,
    opacity: index === 0 ? 1 : 0
  });

  if ($verticalTextItems[index + 1]) {
    timeline.to(item, {
      yPercent: -100,
      opacity: 0,
    }, "+=0.5")
      .to($verticalTextItems[index + 1], {
      yPercent: 0,
      opacity: 1,
    }, "<")
  }
});

Also there is no need to set the yPercent to anything above 100 in the set instance since you have absolute positioned elements. Pushing them beyond that point has no effect.

 

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

Thank you very much, it worked as it should! Can you help with cards? I finished the animation, but it doesn't work at all as it should. How can I make the cards seem to change each other, moving "forward" one by one and going to the end (like on https://www.luminartech.com/), and not all together like mine. I also commented out the text scroll on the left, because for some reason the text scrolls first and only then does the card animation start working.

 

Link to comment
Share on other sites

3 hours ago, RubberFruit said:

Thank you very much, it worked as it should! Can you help with cards? I finished the animation, but it doesn't work at all as it should. How can I make the cards seem to change each other, moving "forward" one by one and going to the end (like on https://www.luminartech.com/), and not all together like mine. I also commented out the text scroll on the left, because for some reason the text scrolls first and only then does the card animation start working.

 

 

 

I updated my codepen, I managed to combine 2 animations and almost achieve the desired result, but I can not understand why onComplete does not fire after changing the z-index ( I want the card to fall into place of the first card, and the same thing happens with 2 so that when the scroll was rotated, but instead they remain in their places)

 

Link to comment
Share on other sites

Hi,

 

In this cases is better to create your animations in advance and then add ScrollTrigger to the mix. Also right now you are creating two different timelines which I think is causing more issues than it's solving.

 

Here is an approach that creates a single timeline for each element and then, sets each timeline on a specific position based on the current index of the loop. This has no ScrollTrigger built into it, just a proof of concept of how to approach this in a dynamic way:

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

 

Now, plugin ScrollTrigger into this is a bit of a challenge I'll have to say, especially with a dynamic approach. I think the best way would be to manually create the animations and add them to the same timeline that controls the texts using the position parameter. Like that you can position each card animation precisely where you want/need it. Sure thing is not the most elegant solution for this, but sometimes the simplest solution, which can be a little bit verbose and not extremely elegant is the best one.

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

8 hours ago, Rodrigo said:

Hi,

 

In this cases is better to create your animations in advance and then add ScrollTrigger to the mix. Also right now you are creating two different timelines which I think is causing more issues than it's solving.

 

Here is an approach that creates a single timeline for each element and then, sets each timeline on a specific position based on the current index of the loop. This has no ScrollTrigger built into it, just a proof of concept of how to approach this in a dynamic way:

 

 

 

Now, plugin ScrollTrigger into this is a bit of a challenge I'll have to say, especially with a dynamic approach. I think the best way would be to manually create the animations and add them to the same timeline that controls the texts using the position parameter. Like that you can position each card animation precisely where you want/need it. Sure thing is not the most elegant solution for this, but sometimes the simplest solution, which can be a little bit verbose and not extremely elegant is the best one.

 

Hopefully this helps.

Happy Tweening!

 

Thanks a lot for your help! I'll try to adapt your example for a scroll trigger) Another question - how can I "stop" the animation for a 3 vertical text element when it reaches the middle? So that at the end of scroll 3 the text element continues to go up?

 

image.thumb.jpeg.9e8ecafd497db9a1f699003a50457bd5.jpeg

Link to comment
Share on other sites

1 hour ago, RubberFruit said:

 

Thanks a lot for your help! I'll try to adapt your example for a scroll trigger) Another question - how can I "stop" the animation for a 3 vertical text element when it reaches the middle? So that at the end of scroll 3 the text element continues to go up?

 

image.thumb.jpeg.9e8ecafd497db9a1f699003a50457bd5.jpeg

 

 

I did very badly (updated the codepen), but it works! Please can you help me with the following issues:

1) When a new card appears from behind, the entire "scene" with cards shifts to the right (Can you please help with timings and values so that the whole "scene" seems to stay in one place when scrolling)

2) So that the animation ends when the 3 text is in the middle of the screen (so that it does not scroll further up)

 

See the Pen gOBVLQR by rubberfruits (@rubberfruits) on CodePen

Link to comment
Share on other sites

Hi,

 

You have to add  a check so the text out animation doesn't run if the element is the last one. In this case this seems to work:

$verticalTextItems.each((index, item) => {
  gsap.set(item, {
    yPercent: index === 0 ? 0 : 100,
    opacity: index === 0 ? 1 : 0
  });
  if ($verticalTextItems[index + 1]) {
    timelineText
      .to(
      item,
      {
        yPercent: -100,
        opacity: 0
      },
      "+=0.5"
    )
      .to(
      $verticalTextItems[index + 1],
      {
        yPercent: 0,
        opacity: 1
      },
      "<"
    );
  }
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

On 6/3/2023 at 4:47 AM, Rodrigo said:

Hi,

 

You have to add  a check so the text out animation doesn't run if the element is the last one. In this case this seems to work:

$verticalTextItems.each((index, item) => {
  gsap.set(item, {
    yPercent: index === 0 ? 0 : 100,
    opacity: index === 0 ? 1 : 0
  });
  if ($verticalTextItems[index + 1]) {
    timelineText
      .to(
      item,
      {
        yPercent: -100,
        opacity: 0
      },
      "+=0.5"
    )
      .to(
      $verticalTextItems[index + 1],
      {
        yPercent: 0,
        opacity: 1
      },
      "<"
    );
  }
});

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

Thank you very much once again!) Can you help with the meanings of the cards so that they do not go "to the right and up" when changing? I have no idea why this is happening ... Do I need to change the parameters for the initial installation or what?

 

 

I updated the codepen once again, it's much better, but I have 1 more question: when resized, the cards lose their position and move to the left on the mobile version + the problem with shifting the entire scene to the right ((

 

See the Pen OJaLgQv by rubberfruits (@rubberfruits) on CodePen

Link to comment
Share on other sites

Hi,

 

1 hour ago, RubberFruit said:

Thank you very much once again!) Can you help with the meanings of the cards so that they do not go "to the right and up" when changing? I have no idea why this is happening ... Do I need to change the parameters for the initial installation or what?

I don't really follow what you mean with this. Please be more specific about what's happening and if possible include a minimal demo of the behaviour.

 

1 hour ago, RubberFruit said:

I updated the codepen once again, it's much better, but I have 1 more question: when resized, the cards lose their position and move to the left on the mobile version + the problem with shifting the entire scene to the right

This is definitely a CSS problem and not GSAP related. Before creating your first GSAP animation your HTML/CSS should be 100% responsive, otherwise your project can turn into a can or of works really fast. Unfortunately we don't have the time resources to go through your setup and find responsive issues or create custom CSS for our users. We have to keep the forums focused on GSAP related issues.

 

Happy Tweening!

Link to comment
Share on other sites

13 hours ago, Rodrigo said:

I don't really follow what you mean with this. Please be more specific about what's happening and if possible include a minimal demo of the behaviour.

 

I'll show you in the screenshot: on the left - the moment when we scrolled to the section (1 card), on the right - we scrolled to the 3rd card. The distance from the text to the block of cards changes, as does the distance from the cards to the navigation points

 

image.thumb.png.fa78af8158660f145c03e8c3518b8b48.png

Link to comment
Share on other sites

  • Solution

Hi,

 

This is basically about adding an extra instance to the timeline after the loop that takes all the elements that extra step forward, soto speak.

 

I'm having a few issues trying to follow your code, it's almost 250 lines and I'm not sure what is doing what exactly. To give you some idea it should be something like this:

const tl = gsap.timeline({
  // Timeline and ScrollTrigger Config Here
});

elements.forEach((element, index) => {
  // Your loop stuff here
});

// After the loop add a final instance to the timeline
// that moves everything to the final position
tl.to(elements, {
  // Config here
});

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

  • 2 weeks later...
On 6/9/2023 at 2:59 AM, Rodrigo said:

Hi,

 

This is basically about adding an extra instance to the timeline after the loop that takes all the elements that extra step forward, soto speak.

 

I'm having a few issues trying to follow your code, it's almost 250 lines and I'm not sure what is doing what exactly. To give you some idea it should be something like this:

const tl = gsap.timeline({
  // Timeline and ScrollTrigger Config Here
});

elements.forEach((element, index) => {
  // Your loop stuff here
});

// After the loop add a final instance to the timeline
// that moves everything to the final position
tl.to(elements, {
  // Config here
});

Hopefully this helps.

Happy Tweening!

Thank you very much for your help! I got a "clumsy", but working visually good animation)) I have 1 more question: if I log in from a mobile device and try to scroll down very quickly, is there such an opportunity to somehow slow down or stop the scroll in front of the section with pin cards so that in the case of a large scroll, the user still starts viewing the section with first card and first text?

Link to comment
Share on other sites

Hi,

 

The custom logic that achieves that can be written for sure, but it might not be super simple and it could feel a bit weird if you're a user. Unfortunately this is a bit beyond the scope of the help that we can provide in these free forums. We don't have the time resources to create complex solutions for our users, sorry. You can contact us for paid consulting or post in the Jobs & Freelance forum in order to get some help.

 

Good Luck with your project!

Happy Tweening!

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