Horizontal Scroll With Nesteed Animations

[BebDev]

Hi guys,

 

I'm currently working on a project and want to use ScrollTrigger to create a horizontal scroll, but with nested pinned animations.

 

As you can see in the pen attached, I want the orange section to be pinned until the opacity of the paragraph equal 0. I managed to create the ScrollTrigger instances, but I don't know how to pin the orange section till the animation ends.

 

Any help would be greatly appreciated!

 

Cheers!

See the Pen WNJBRpd by abanobakram (@abanobakram) on CodePen

[Rodrigo]

Hi,

 

What you can use is Container Animation (see the gray section):

Now if you want to stop the animation in a specific part, I'm not sure if pining the horizontal element is possible. I'll ping @GreenSock so he can enlighten all of us. What I know is possible is to create a single timeline to handle all the horizontal animation. Move all the panels until the orange one, add the animation there and then keep the horizontal animation of the panels. All we have to do is find which panel we want to stop. This seems to be working the way you want:

console.clear();

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".panel");

const stopPanel = sections.findIndex((section) => section.dataset.pin);

const tl = gsap.timeline({
  defaults: {
    ease: "none"
  },
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 0.5,
    end: "+=4000",
  }
})
.to(sections, {
  xPercent: -(100 * stopPanel),
  duration: stopPanel,
})
.to(".fade-out-text", {
  opacity: 0, y: 25,
  ease: "power2.out",
  duration: 1,
})
.to(sections, {
  xPercent: -(100 * (sections.length - 1)),
  duration: sections.length - stopPanel,
});

Live example:

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

 

Let us know if you have any other question.

 

Happy Tweening!

[chani]

hi,

I tried to add animation to the text of the numbers so that it moves at a different rate than the text below.
But the animation doesn't behave as I expected
I would really appreciate your help on how to make it work properly

See the Pen WNKrgmX by chaniy (@chaniy) on CodePen

[GSAP Helper]

8 hours ago, chani said:

But the animation doesn't behave as I expected
I would really appreciate your help on how to make it work properly

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't behave as I expected' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[chani]

 

24 minutes ago, GSAP Helper said:

מתנצל על חוסר התגובה עד כה, אבל נראה שאנשים מתקשים לעזור בשאלה הזו. פרטים מעורפלים כמו 'זה שבור' או 'זה לא מתנהג כפי שציפיתי' קשה מאוד לאנשים לעזור בהם. הנה כמה טיפים שיגדילו את הסיכוי שלך לקבל תשובה מוצקה:

Thank you for your willingness to help
I will try to explain myself better
I want the text of the numbers with the class 'UP' to start moving ('y:'50px) when it enters the display and finish moving when it leaves the display

or in other words:
I want the elements inside the section to move at a different rate than the scrolling of the section
When I tried to perform some kind of horizontal scrolling animation like in this example:

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

The animation worked properly together with containerAnimation but as soon as I added stops like in this example

See the Pen WNKrgmX by chaniy (@chaniy) on CodePen

The animation didn't start and end like the start and end values I wrote for it in scrollTrigger.

[GreenSock]

As the docs indicate, containerAnimation does not accommodate pinning (horizontally). That can get extremely complex especially with nested things. What your demo is doing is basically hacking a way to simulate pinning in a very particular way for that scenario but of course that'll throw off the accuracy of the start/end values of things further along in the containerAnimation. In other words, ScrollTrigger looks at the containerAnimation and assumes it'll move the container linearly across the whole space, but you're interfering with that by manually forcing the container to counter-move to simulate pinning during a portion of the containerAnimation. So you'd need to adjust your start/end values accordingly based on whether or not the would be located before or after that manual intervention.

 

This is very custom and it's not something we can build for you for free, but if you need help working out all the logic, feel free to contact us for paid consulting services or you are welcome to post in the "Jobs & Freelance" forum. 

 

Good luck!

[chani]

10 minutes ago, GreenSock said:

s the docs indicate, containerAnimation does not accommodate pinning (horizontally). That can get extremely complex especially with nested things.

Thank you for your help.
I focused on the problem
It is possible to attach the ScrollTrigger to the main container and not to the animated element
And I will calculate the start and end values of the animation in relation to the scrolling of the container?

[GreenSock]

I read your question a few times and I still don't really understand what you're asking, sorry. 

 

You can use ScrollTrigger on an element that is actually scrolling horizontally (set horizontal: true), sure. That means the scrollbar will be at the bottom...not "fake" scrolling or containerAnimation. 

[chani]

@GreenSock How much does paid assistance cost?
And how does the work process go?

[GreenSock]

I sent you a private message about pricing and process. 👍