(scrollTrigger) How can I make the size of a .container with {pin: true} have the height equal to the amount(duration) of timeline associated with it?

[yeisonvelez11]

 

 

I will try to explain myself better.

I have a container (.container)  that is 100vhin height (I don't know if there is a better way to indicate that it occupies 100% of the viewport's height), and {pin:true}.

 

 .container{

   background:orange;

   height: 100vh;

  }

 

    let tl = gsap.timeline({

      scrollTrigger: {

        start: "top top",

        end: "100% top",

        trigger: ".container",

        toggleActions: "restart none reverse none",

        markers: true,

        scrub: true,

        pin:true

      },

    });

 

and I have several timelines that chain-react when the scrolltrigger reacts to .container.

 

 

    tl.from("#square", {

      autoAlpha: 0,

      scale: 4,

      duration: 3,

    });

 

    tl.to("#square", {

      x: 100,

      duration: 3,

    });

    .

    .

    .

 

I want to know how to do these 2 things:

 

1- I put many timelines, and I want each one to have a slightly longer duration, currently they are all showing very fast (as I understand it, they currently end before the end of the .container), how can I make them last longer?

 

2- I would like the height of the pin (.container) to depend on the number of timelines associated with it.

 

How can I do it? thanks!

 

this is my live code:

 

http://plnkr.co/edit/eFDqDZJd37luAorU?open=lib%2Fscript.js

[ZachSaucier]

8 hours ago, yeisonvelez11 said:

how can I make them last longer?

More details about how duration works with a scrub is covered in the ScrollTrigger docs. The main gist is that the length of your animations are dependent on the start and end of your ScrollTrigger and the proportion of your animations within the timeline. 

 

8 hours ago, yeisonvelez11 said:

I would like the height of the pin (.container) to depend on the number of timelines associated with it.

To do this I would get a count of how many animations your have and then set the height of the container based on that information.

 

FYI toggleActions doesn't have any effect when you have a scrub. And your end value is currently equivalent to the default one so you could remove it also.