scrolltrigger scrollsmoth and sliding panels

[AllenIVe]

what am I doing wrong?

in addition to sliding the panels, in the last one when it is pinned I would also need to animate the image and other aspects.

 

I would need the last section to remain pinned more and insert a timeline to fade the image

 

Thanks

See the Pen oNJQXve by IveSix (@IveSix) on CodePen

[Rodrigo]

Hi,

 

Is not really clear to me what you're trying to do, please be more specific about what's the desired effect. Maybe include a link to a live site that shows what's your goal.

 

Also your example has over 3000 lines of CSS, so there could be some issue there but we don't have the time resources to comb through that trying to find a problem there.

 

Finally your ScrollTrigger config has a trigger that is not present in the HTML:

let tlPanel = gsap.timeline({
  scrollTrigger: {
    trigger: ".container_panel  ",// extra spaces here, remove those
    start: "center center",
    end: "max",
    pin: true,
    scrub: true,
    markers: true,
    snap: 1 / (panels.length - 1)
  }
});

<div class="container_pane ">

So that is not going to work.

 

Try to reduce your demo to be as simple and as small as possible, avoid thousands of lines of code or styles.

 

Happy Tweening!

[AllenIVe]

@Rodrigo Thanks  for your reply,

 

i have updated the codepen 

 

This is the staging site > https://innovando.oneupstudio.it/chi-siamo/

 

So when the last panel > about__sostenibilita__video  is pinned i want to create new animation, like scaling the img etc etc.

 

 

[Rodrigo]

Hi,

 

There are a few issues in your code right now.

 

First you are adding ScrollTrigger configurations to GSAP instances that are added to a timeline, that's a no-no for logical reasons:

 

Nesting ScrollTriggers inside multiple timeline tweens
A very common mistake is applying ScrollTrigger to multiple tweens that are nested inside a timeline. Logic-wise, that can't work. When you nest an animation in a timeline, that means the playhead of the parent timeline is what controls the playhead of the child animations (they all must be synchronized otherwise it wouldn't make any sense). When you add a ScrollTrigger with scrub, you're basically saying "I want the playhead of this animation to be controlled by the scrollbar position"...you can't have both. For example, what if the parent timeline is playing forward but the user also is scrolling backwards? See the problem? It can't go forward and backward at the same time, and you wouldn't want the playhead to get out of sync with the parent timeline's. Or what if the parent timeline is paused but the user is scrolling? 

So definitely avoid putting ScrollTriggers on nested animations. Instead, either keep those tweens independent (don't nest them in a timeline) -OR- just apply a single ScrollTrigger to the parent timeline itself to hook the entire animation as a whole to the scroll position.

 

Second you are running this code for every panel in your loop:

panels.forEach((panel, i) => {
  if (i === 0) return;
  tlPanel
    .from(panel, {
      yPercent: 100
    })
    .to(".about__sostenibilita__video img ", {
      opacity: 1,
    });
});

That means that for every panel that is not the first one you are animating the opacity of the ".about__sostenibilita__video img " element, so when the last panel is reached (when that element actually is) it's opacity is already one, so you won't see an opacity animation.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!