Brodiero

Thanks Jack, it's good to know it's acceptable, if not recommended ?

Had a trawl through the site and codepen but couldn't find an answer. I have timelines that require different scrolltrigger values according to media queries, is it correct to place paused timelines outside the ScrollTrigger.matchMedia() and the scrolltrigger/s inside the function? Or is it best practice to duplicate timelines in each media query? Or some other setup? Thanks

That's very helpful, I think on shorter pages it may be a better implementation to hint at content outside the viewport whilst the bounce works for longer content. Got me thinking now thanks

Yes! That's exactly what i was looking for, thank you so much. I'm going to try and understand what you did. I'm sure it's pretty basic to yourselves but i'm at the basic level!

Hi @akapowl thank you for the thorough examples and explanations, much appreciated. The issue i'm trying to solve is the unknown height/position of the 'landing' page. I want to be able to use anchor and/or links from other pages to scroll to a page position, then have gsap 'takeover' with a final up/down nudge, so to speak. The elastic ease was an implementation i tried but the real issue is getting gsap to scroll-by, rather than scrollTo, if that makes sense? ie www.random.com/page1.html/#id2 page1.html loads at #id2 anchor then > scrolls up X > down by X and settles at 0 Does that make sense? I feel like i need to create an array and gsap then uses the nearest but have no luck with the implementation

I'm trying to create a simple 'bounce' when a page is loaded to reveal content above and/or below a 100vh. The idea is that coming from an anchor link or another page to a 'full page' the user will get a glimpse at content above/below before the page settles and avoid an ugly 'scroll for content'. I'm trying to get it to scroll up/down x pixels but it goes to the first/top element/class, not the current anchor point or page position but i'm new to js & gsap and would appreciate some pointers.

I have a similar predicament. My opening animation uses elements that are then used in a scrollTrigger tl. I have a fixed position 100vh splash animation, at the end of which I add my 'scrolling spacer' 800vh div below and get a scrollbar for the ST tl. Does that sound like a sensible approach?

Kind of, i want it to pin, then when it reaches the end of the pinning it should fade up and out. No need to keep same markup, that's me just piecing together what i know, would you recommend doing it with a designated scrolltrigger/timeline per pin instead?

Sorry if i'm not explaining myself well. Put aside the pinning action for a moment - the text should fade out as 'correct fade' video. Combine that with a pin, the text should pin for the duration of the red section, then fade out as 'correct fade'. instead it pins and fades out immediately, not when it visibly hits the ST start & end parameters. correct fade.mov

The list should pin for the section scroll duration (red or green md-col-7) the each line fade out as it scrolls up. What it appears to be doing is pin, then fades out as the 'original' position reaches the top. Im trying to have a text block pin whilst related images scroll, then as the next section scrolls up the previous pin scrolls out and fades to avoid the header. Commenting out either the 'general fade-out top of viewport' or 'section info pin' illustrates the two things i wish to combine.

Where am I going wrong with the pin & 'fade-out'? I'm trying to have the list 'content1-wrapper-list' pin, then at the end of pin it should fade out before intersecting with the header. I can get the two to work independently but combined the 'fade-out' triggers ignoring the pin....

It was an erroneous class superseded by another so I missed it, I guess gsap didn't! Thanks for the steer

Thanks Jack. pinSpacing is already set to false and i'm using 3.5.0 across the board, have also emptied cache/tried different browsers. I will rebuild the page and try and find the error. Will report back and findings!

Oddly I can't reproduce this in the stripped down codepen but in my own page the pin-spacer adds a calculated top value to my pinned element, giving it an unwanted offset within the layout. my page looks like this <div class="pin-spacer" style="flex-shrink: 1; display: block; margin: 0px 0px 32px; right: auto; bottom: auto; top: 201.058px; left: auto; position: relative; overflow: visible; box-sizing: border-box; width: 557px; height: 2008px; padding: 0px;"><div id="content1-wrapper-list" class=" whereas the stripped down codepen - same gsap but removed css/content - has top:auto <div class="pin-spacer" style="float: none; flex-shrink: 1; display: block; margin: 0px 0px 32px; right: auto; bottom: auto; top: auto; left: auto; position: relative; overflow: visible; box-sizing: border-box; width: 383px; height: 968px; padding: 0px;"><div id="content1-wrapper-list" class="md-col-5 md-col services-list mb3 left-align items-start" style="opacity: 1; visibility: inherit; transform: translate3d(0.5581%, 0px, 0px); left: 0px; top: 0px; margin: 0px; width: 383.328px; height: 1000px; padding: 0px; bottom: auto; right: auto;"><ul class="h2 m0 line-height-3 list-style-none "><li><div class="line-height-1 bold pb2 overflow-hidden from-left-off fade-out" style="opacity: 1; visibility: inherit;">Title</div></li> Any ideas why this may be?

Thank you Zach, I really appreciate you taking the time to explain things, it helps enormously. Your code side-by-side helps me understand better although I'm clearly trying to run before I can walk here.... Logic/issues - I am aware of it - I can see the resize no longer works also but at the moment i'm trying to not do everything at once as I will get lost even deeper, and these are more like mockups to see what works before getting it ship-shape, again running before I can walk!