Jump to content
Search Community

ScrollTrigger - what to scroll

iDad5 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I build an intro animation in which at some point a 'curtain' parts and gives way to the page behind. So far so good. Now i want to pause the animation sequence before opening the curtain and give the visitor a chance to scroll open said curtain. (If she doesn't do it I'll have play it independently.)

 

As I have little Experience with scrollTrigger and the final setup is quite complex I would like to hear your advice:

 

The Setup:

 

  • The curtain (for now and good reasons) has position fixed and ist exactly the size of the viewport.
  • The page under is has in most cases initially a height that is  smaller or equal to the viewport height (but that might be not always the case.)
  • I want the page to stay at its' place and somewhere in the upper half of the page an animation is playing synchronized with the curtain's opening.

 

As I do normally not have an element that can scroll (nothing higher than the viewport) from that setup I guess I need to introduce some hidden/transparent element that either has (for example) double the viewport height, or adds additional height to the curtain or the page.

 

I'm not sure what would be the best way to go about it.

My thoughts are:

 

  • Changing  the height of either the page container or the curtain container itself would make trouble with the internal positioning and animations, so that seems to be the least best option.
  • I'd prefer not to have an additional element it in the page. The content is more complex, it might change often and the page height is not predictable. Also the page is initially hidden behind the curtain and at least a litte extra effort would be necessary to receive the scrolling. (But if there are good arguments for putting the extra height in there, that all can be overcome.)

 

My questions:

 

  • Which element to extend, page, curtain or an extra element altogether?
  • If one of the existing elements are to be used, is it better to place a high element inside, or should I put that element inside a container with extra height?

 

I built a little abstract CopdePen to illustrate the principle. Thank you for our input.

 

See the Pen MWbREbo by mdrei (@mdrei) on CodePen

Link to comment
Share on other sites

 

Of course you could, but you actually don't have to incorporate an invisible element to enable scrolling.

 

What you could do alternatively, is incorporate a pinning ScrollTrigger with an end defined to whatever amound of scrolling you want to have and let ScrollTrigger's pin-spacing add scrollable space to your setup.

 

See the Pen a3e4c343f54f927d64de4480e6e4dea9 by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

@akapowl: Thanks a lot, that seems to be exactly the kind of solution that I would have found myself after log hours of going in the wring direction. Great help!

 

(I don't mark it as solution for the moment, just because I would love to hear one or the other suggestion about my setup if someone has good input.)

Link to comment
Share on other sites

24 minutes ago, iDad5 said:

Is it advisable to use a third element as the trigger?

 

If it was positioned so that it would work, I don't think there would be much that could be said against that.

 

 

25 minutes ago, iDad5 said:

Setting either page ore curtain as the triggers messed up my setup and animations.

 

Could you elaborate on that a bit more? ...what do you mean by 'messed up'?

A demo of the issues you are having would be very helpful, because otherwise all that could be said would be stabbing in the dark.

 

 

  • Like 2
Link to comment
Share on other sites

12 minutes ago, akapowl said:

If it was positioned so that it would work, I don't think there would be much that could be said against that.

I guessed as much, but it's good to know that you don't see arguments against trying it.

14 minutes ago, akapowl said:

Could you elaborate on that a bit more? ...what do you mean by 'messed up'?

A demo of the issues you are having would be very helpful, because otherwise all that could be said would be stabbing in the dark.

Those animations are rather to complex for a CodePen, and as they should work at a lot of different screen sizes I have to rely on percentages. I do understand that that's not ideal and I guess I could try to rework and optimize for the ScrollTrigger, but on the other hand I'm rather sure that only a small percentage of visitors will use the scroll so the auto-play version which already works satisfactory is more important. 

 

THX

Link to comment
Share on other sites

Ok, I now worked out a solution that kind of does the job I want it to do, but that feels very wrong somehow...

 

See the Pen YzpbWRG by mdrei (@mdrei) on CodePen

 

Why does it feel wrong? Because I had to use !important on my scroll-layer

What did I try?

I wanted an (invisible) elementon top of my page that would scroll and thereby scrub a timeline.
I needed it not to affect any sizing in any other element

So I put a postion:fixed element with 100vw and 100vh (#scroll-layer) on top of my page and an element (#scroll-target) with 1000vh height into it.

Setting the #scroll-target as trigger and #scroll-layer as scroller should have worked. (Not sure if the latter was actually necessary.)

 

What happend?

ScrollTrigger set the the position of my scroll-layer to relative (despite having pin:true) and my layout as well as my scrolling went south...

(See image)
Being me I gave it the finger and set position:fixed !important. 😁
And it worked.
But somehow that feels very wrong. I'm sure you have much better solutions for me
 

 

2021-03-17_11-05-02.jpg

 

PS: I also struggle with the end parameter, as it seems not to accept vh values and the percentages somehow seem off...

Edited by iDad5
PS
Link to comment
Share on other sites

  • Solution
1 hour ago, iDad5 said:

Why does it feel wrong? Because I had to use !important on my scroll-layer

 

1 hour ago, iDad5 said:

ScrollTrigger set the the position of my scroll-layer to relative (despite having pin:true) and my layout as well as my scrolling went south...

(See image)

 

Since you are not using the body as the scroller, ScrollTrigger uses transforms for the pinning as the docs state - and I think the position relative on your scroll-layer might be related to that.

 

You can prevent that by using pinType: 'fixed' on your ScrollTrigger.

 

pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful.

 

 

 

Does that change something with regard to your layout going south?

 

See the Pen 7e73e00ffda4a56f166782daf0f96a5c by akapowl (@akapowl) on CodePen

 

 

 

1 hour ago, iDad5 said:

I'm sure you have much better solutions for me

 

Personally, I would still go with the suggestion I gave in my first answer. I don't know if it's 'better' for everyone - to me it certainly feels better because I don't have to think about positioning an invisible element for it to work as I want.

 

Since it appears to be messing up your animations and setup, it might not be for you - but I'll still leave this here, just in case somebody is wondering.

 

See the Pen c4f59c56215ef4e378ef563b94fb9bac by akapowl (@akapowl) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Thank you very much @akapowl.

1 hour ago, akapowl said:

Personally, I would still go with the suggestion I gave in my first answer. I don't know if it's 'better' for everyone - to me it certainly feels better because I don't have to think about positioning an invisible element for it to work as I want.

 

Since it appears to be messing up your animations and setup, it might not be for you - but I'll still leave this here, just in case somebody is wondering

I'm totally with you there, it is my special situation where the animation is only sugaring and the scroll-scrubbing an afterthought on that, that makes this solution the better one for me. 

PinType:'fixed' made me feel a lot better. I had read it but with all my experimenting in the hitherto unexplored wilderness of ScrollTrigger I forgot about it. 

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