Jump to content
Search Community

ScrollTrigger - Duration

Christiemade test
Moderator Tag

Recommended Posts

I am looking for something that will allow me to drag out an animation for how long it takes the user to scroll through the element.  So, for example, a div that takes up 100% height of browser window.  It's at 0% opacity.  As soon as it enter's users scroll window, it starts to animate to 100%, but it doesn't get to 100% until it's out of the users scroll window again on the other side.  I am only seeing duration as an amount of time.  Is this a possibility?

Link to comment
Share on other sites

 

Welcome to the forum @Christiemade

 

That sounds like what you want to have a look at are the start and end of a ScrollTrigger in combination with a scrub.

Those are the values that define the duration of scroll over which the animation is being scrubbed through.

 

This part of the docs might also be of interest for you here:

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

In following example the trigger is set to that element, wih a start of 'top bottom' which also is the default for not-pinning ScrollTriggers (when the element's top hits the bottom of the viewport) and an end set to 'bottom top' (when the bottom of the element hits the top of the viewport).

 

Is that what you had in mind?

 

See the Pen 6cea88fda7c398362c3511b6b3f219d0 by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

What other options can go into start and end?  For example, if I wanted it to reach 100% opacity when "start" was at the TOP of the screen? (Right now it gets to 100% when end is at the top of the screen).  Or if I want it to get to 100% opacity when it was 50% of the way to the top of the screen?

Link to comment
Share on other sites

 

The first parameter of start and end always refers to the trigger-element and the second parameter always refers to the viewport.

So if you want it to have full opacity once its top reaches the top of the viewport you'd set the end to 'top top'.

 

As strings you can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px".  You can also use numbers for exact scroll values and functions too, if you like. For more information about all that please see 'start' and 'end' under Usage & special properties in the docs.

 

 

 

  • Like 2
Link to comment
Share on other sites

If I wanted the fade to last the length of two separate divs, would I need to use timeline for that?

 

Let's say we're animating something that is fixed over on the side of the screen.  We want it to start to change opacity when div #2 comes into view, but not finish until div #4 comes into view (so its still animating all the way through div #3)

Link to comment
Share on other sites

 

You can use the endTrigger property for those kind of scenarios.

 

endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

 

From the docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Following examples uses the first cirlce as the trigger-element (when it comes into view) and the third circle as the endTrigger-element (when it comes into view).

 

See the Pen 319a601d1089ad285f3277eccc437af1 by akapowl (@akapowl) on CodePen

 

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