Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alexey Matlash

ScrollTrigger pinned element resize issue

Recommended Posts

Wassup, GSAP!

My goal is to build a dynamic sections container, which should be adaptive. Some of the sections should have height: 100vh;
While I resizing my viewport`s height (perfectly repeats at codeOpen (especially when resizing fast)) my sections are resizing too.
While all of my section are position: absolute; (for other section animation types) I have to set their top: property manually via gsap.set({ })

I also noticed that scrollTrigger refreshes a while longer than window.onresize, and i have to handle resize by scrollTrigger`s onRefresh  

It works perfect, until I pin one of the sections. After that, my pinned section starting to have some wierd top offset value (screenshot).
I`m missing something essential here, console.log says that my top calculations are correct, but my top value is overwriting by something.
Plus, I still cant get if there is a possibility to refresh markers ( and ScrollTrigger start-end behavior ) in a correct way.

top_gap.png

See the Pen GRZGeqK by mocosh (@mocosh) on CodePen

Link to comment
Share on other sites

Wassup, Alexy,

 

Maybe I'm missing something, was there a question here?

Link to comment
Share on other sites

13 minutes ago, Visual-Q said:

Maybe I'm missing something, was there a question here?

SORRY!
Accidentally sent unfinished topic+question.
It`s updated now

Link to comment
Share on other sites

Hey Alexey and welcome to the GreenSock forums.

 

One way to do this would be to recreate the ScrollTriggers inside of the refreshInit callback:

See the Pen LYNBNme?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm curious: do you really need the position: absolute? One of the demos listed on the ScrollTrigger docs page shows how to do the same sort of thing without it:

See the Pen KKpLdWW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Thanks for paying attention to my question and developing demo solution!
That`s what I was getting to dig in after all. But I was wondering if it is the only possible way and if scrollTrigger was designed exactly like that. May be because of awesomeness of GSAP + ScrollTrigger I expected some extra magic automatisation from them. Anyway, I think that solution fits me well, as you showed me an elegant way to solve my problem. Thanks again!

As for your question:

Quote

I'm curious: do you really need the position: absolute? One of the demos listed on the ScrollTrigger docs page shows how to do the same sort of thing without it:


I`m not 100% sure I really need position: absolute here. But my goal is to develop container with various types of section appearing animations. Let it be only "cover" and "reveal" animations, but every single section animation could be any of that types. I was digging into sections demos, and found out, that for "reveal" animations position: absolute is the only option as they should be pinned much higher than their normal top-offset (I mean if they were position: relative or smth like that) here is another demo, from docs where all sections are absolute:

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

.

P.S. I`ve tried a lot of self-designed tricks to make it possible to "reveal" sections without position: absolute. I`ve tried to artificially move up revealed section (that one from the bottom) and pin it while previous section covers 100% of viewport. But my code become very messy and complex and I didn`t reached the same result because of unnecessary empty spacing after revealed sections.

Link to comment
Share on other sites

18 minutes ago, Alexey Matlash said:

May be because of awesomeness of GSAP + ScrollTrigger I expected some extra magic automatisation from them.

Your demo definitely wouldn't work because you're setting the top value after ScrollTriggers finishes updating (i.e. on refresh). You might be able to get something like that working if you used the refreshInit callback instead. But I think it's cleaner to just recreate things on refresh like my demo shows.

Link to comment
Share on other sites

Oh! Now I get it.
IMO, ScrollTrigger main docs page is not paying enough attention to refreshInit and ...wow onRefreshInit is currently in ScrollTrigger`s sourcecode, but there is no any mention at main docs page (i mean Usage & special properties section)

Link to comment
Share on other sites

19 minutes ago, Alexey Matlash said:

ScrollTrigger main docs page is not paying enough attention to refreshInit

That may or may not be intentional ;) It's generally good practice to let ScrollTrigger do the reconfiguring/resizing. 

  • Haha 1
Link to comment
Share on other sites

Haha! Ok, I`ll leave it to you)
Big thanks for your attention.

I also hugely respect all admins & moderators of this forum for their time, patience and supportive participation in newbies problems. And of course dev team!
I haven`t feel more happy about animation tools since the day I discovered Macromedia Flash about a decade ago.

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