Jump to content
Search Community

Using relative values in start property at pinned container

reinaldohrm test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

So, i'm learning gsap for about three days and i'm facing a "problem" that can be something that i just don't know that works that way but is making me a little bit confused.

 

In the code below, i have two example where, the first one when i try to animate a text inside of a pinned container using the property start with the value "top top" and the trigger being the pinned container, not the text,  it works pretty well as i expected, the text animates when the top of the viewport hits the top of my pinned container.

 

But, at the second example, i tried to use a relative value at startproperty which was "10% top", but the animation actually only started after (probably 10% after) the pin ends and not after the 10% of the top of the pinned container like i was expecting.

I tried to use values like "+=500 top" or "500px top" and it "did'nt" works too. 

 

Is that a normal behavior or i'm just missing something?

And if is is a normal behavior, how can i can achieve what i was expecting?

See the Pen oNMEEVr by reinaldorm (@reinaldorm) on CodePen

Link to comment
Share on other sites

  • Solution

Hiya!

 

So you're pinning a container right? That means it doesn't move for the duration of the pin.

"10% top" means 'fire this when 10% of the container has passed the top of the viewport'

That's not going to occur until the container is unpinned - for the duration of the pin it's pinned at "0% top",  only when it unpins and starts scrolling again does it hit '10% top'

Animating stuff inside pinned containers can be a little tricky approached like this. It's best to house your animations and pins together. e.g.

 

gsap.from(".example2 h1", {
  id: "text-animation-2",
  alpha: 0,
  y: "+=250",
  scrollTrigger: {
    trigger: ".example2",
    pin: true,
    start: "10% top",
    end: "+=350",
    scrub: 1,
  }
});


This can also come in handy sometimes -

 

pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)
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...