[MatchMedia & Timeline placement]

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

 

[MatchMedia & Timeline placement]

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

See the Pen QWNrJRr by brodiero (@brodiero) on CodePen

[ScrollTo window 'bounce' reveal on load]

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 

[ScrollTo window 'bounce' reveal on load]

2 minutes ago, akapowl said:

Something like this ?

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!

 

 

 

[ScrollTo window 'bounce' reveal on load]

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

[ScrollTo window 'bounce' reveal on load]

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.

 

 

See the Pen rNeJBrQ by brodiero (@brodiero) on CodePen

[Disable Scrolling During Opening Animation]

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?

[pin Spacer adds unwanted top]

 

5 minutes ago, ZachSaucier said:

Ah, so you want the text to still move upward even though it's pinned

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?

[pin Spacer adds unwanted top]

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.

[pin Spacer adds unwanted top]

21 minutes ago, ZachSaucier said:

It seems to be working to me. What do you think is not working?

 

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.

[pin Spacer adds unwanted top]

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

[pin Spacer adds unwanted top]

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

 

Thanks for the steer

[pin Spacer adds unwanted top]

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!

[pin Spacer adds unwanted top]

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?

See the Pen abNJLvy by brodiero (@brodiero) on CodePen

[ScrollTrigger scrubbing not working as expected]

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!

[ScrollTrigger scrubbing not working as expected]

I'm trying to apply a scrub/scrollTrigger to an animation, if I exclude the ScrollTrigger I can get a smooth animation in the tl but applying ST transforms it to on/off with no transistion.

 

It is code borrowed & butchered from the talented and helpful of this forum so apologies for the state of markup, lot of rooting around trying to make sense of things.

 

What i want to achieve is an 'onload' animation - SVG expands - which is then reversed on scroll & scrub, some animation I can get to work thanks to the ST video, which made it look too easy   

 

Thanks for any pointers on my mistakes, it is apparently a great education...

See the Pen zYrKowd by brodiero (@brodiero) on CodePen

[SVG scrollTrigger resize approach]

Thank you Zach!   🤦‍♂️ 

[SVG scrollTrigger resize approach]

Hi all,

 

I'm wanting to create a simple resize/reposition on scroll with an SVG. Something  I thought would be simple and a good beginners lesson has turned into a headache and i've hit a wall. 

 

What i'm looking to do is start with the SVG center of screen scaled at 80vw and shrink down into a fixed sized and positioned header upon scroll, however I haven't even to to scrollTrigger yet!

 

I feel like i'm approaching this the wrong way but i'm not experienced enough to know a better solution and would appreciate any steer I can get.

 

Thanks

 

See the Pen mdVVdyw by brodiero (@brodiero) on CodePen

[Parallax scroll gallery, height issue]

Hi Zach! Thank you for the welcome 🙂

 

I'm both intrigued and excited for the scroll plugin, most of my site ideas centre on it so i'll work on my GSAP and comedy skills until then!

16 minutes ago, ZachSaucier said:

Honestly I recommend waiting and using the scroll plugin. It'll make this sort of thing much easier.

 

 

[Parallax scroll gallery, height issue]

Hello!

 

My first post, i've been lurking for a couple of weeks trawling the forums finding helpful and inspiring posts and people. I'm new to GSAP and JS, having tinkered a little - I have a story much like @PointC although i'm still shooting as my main income. 

 

I'm putting together a new website and building a gallery, fallen very much for GSAP as a tool to bring some great possibilities to it and would like ti utilise it across the site.

 

I've hacked together codepens i've found and i'm trying to translate them with GSAP, the embedded GSAP codepen is how far i've got trying to replicate this parallax effect - 

See the Pen PoPvrWp by brodiero (@brodiero) on CodePen

 however it's (no doubt) clunky and doesn't scale/position the image correctly. I would like to display the image 100% height when centered in the viewport and crop width to fit but I just can't make it work.

 

Appreciate any pointers how to achieve this or better execute it, I understand there's a scrolling plugin to replace ScrollMagic coming soon which may help 'flatten the (learning) curve'... 😉

 

Many thanks!

 

My attempt with GSAP

See the Pen PoPvvrz by brodiero (@brodiero) on CodePen