Jump to content
Search Community

scrolltrigger + pinning + trigger based animation

321dev test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

It's a little hard to explain in words what i want to achieve.

 

When you look at the codepen, you see that the animation starts after scrolling down 100 pixels. I want something like a "deadzone" for the scrolltrigger (what "pin" does when using scrub based animations).

 

When the user scrolls down, nothing should happen in the beginning.

After scrolling down 100 pixel the animation should trigger.

The content itself should still not scroll.

After scrolling down 100 more pixels, the page should start scrolling normally.

 

I hope this was somewhat understandable.

 

Is it possible?

See the Pen qBRqqQX by trogmanaic (@trogmanaic) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @321dev

 

Does this work like you imagined?

 

See the Pen 67b2a3bd225664899199da608f134712 by akapowl (@akapowl) on CodePen

 

What I did there was create two ScrollTriggers - one to handle the pinning and one to handle the animation part only.

For the animation part I wrapped the div#bg in the HTML and used that wrap to trigger the animation - since the #bg is being pinned and its pin-spacer is inside that wrap, the wrap can be utilized to trigger the animation there because it keeps being scrolled with the flow. Does that make sense?

 

  • Like 3
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...