Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yeisonvelez11

(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?

Go to solution Solved by ZachSaucier,

Recommended Posts

 

 

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

Link to comment
Share on other sites

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

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