simple scroll delay, and how to adjust start value to account for dynamic heights?

[modernanim]

I am working on a page model that has a hero section that slides away to reveal text below then soem full-height sections.

The first part is working pretty well thanks to @mvaneijgen and @Rodrigo  — I am using this basis

 

I have two issues which Id like to ask for advice on, see here for my codepen

 

 

1. I am trying to add a bit of vertical motion to the 'mover' elements in each section. really simple stuff! The problem is this movement gets lost if I remove / add sections, there seems to be some interaction between the individual section movement Im looking for and the overall height of the page.

I would like to find a dynamic / flexible solution that doesnt require me to adjust start values depedngn on the number of full-height sections in the page.


2. the homepage header in the '.stickHead' element is doing what it should, Id simply like to delay it a little / start it later...



Apologies if these are obvious questions/problems, I haven't tried to really get going in GSAP until recently!

thanks!

 

See the Pen dPyKvgg by dezbat (@dezbat) on CodePen.

[mvaneijgen]

I would start b y making the two sections that are stacking in your layout to be in the same container, that way they are together and makes things much easier to manage and control.

 

Currently your .stickHead does not have an animation, so it is hard to delay things. The only thing it does is move up an get pinned when it hits the top. This way of working with ScrollTrigger is totally fine, but doesn't allow you to tweaks things. Personally when creating ScrollTriggers I always like to start with a timeline and then have ScrollTrigger on that timeline. This way you can build all the timing and tweening you like and don't just have to rely on scrolling.

 

Also I would make it so your ScrollTrigger makers are in view. You had set it to be -250%, which makes it so that the markers is 250% above the current browser view. I personally don't like this, because then I cant see my makers a see when things trigger. So to make things easier to read make sure the makers are in view 

 

I've restricted your CSS and JS a bit. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

See the Pen KwKeqwx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

[modernanim]

BIG thanks for your time here @mvaneijgen — will have alook at this more closely asap. 

Interesting to see your approach to the '.myTrigger' div, I think I understand, is the grid setting creating full-screen elements on top of each other?

[mvaneijgen]

33 minutes ago, modernanim said:

Interesting to see your approach to the '.myTrigger' div, I think I understand, is the grid setting creating full-screen elements on top of each other?

 

Yes with the grid settings it is an easy way to create elements right on top of each other, without having to remove them from the document flow, which position: absolute; would do. 

 

Check my post for more info on it. 

  
 

 

[modernanim]

really helpful learning here — thank you!


This model is working really well now, I am wiring it into my Craft CMS template, the only thing I notice now is the scroll on the hero image is a bit jittery, perhaps smooth scroll is needed here...


once again — big thanks for the help.

 

[mvaneijgen]

The Codepen is perfectly smooth, so if it is not smooth in your setup, something else might be intervering? 

 

 

[Rodrigo]

18 hours ago, modernanim said:

the only thing I notice now is the scroll on the hero image is a bit jittery, perhaps smooth scroll is needed here.

Check the size of the image, larger images (in terms of pixels size, DPI and KB) require more expensive re-paints from the browser. Normally performance problems stem from the rendering phase and not the code part of things.

 

Try adding will-change: transform; to the element being animated.

 

Check if you have any CSS filters either in the page or the section being animated. Filter are just terrible for performance and can cause some unwanted and unexpected behaviour, especially when something that is affected by said filter is animated.

 

Happy Tweening!

[modernanim]

thanks @Rodrigo — I was trying a filter blend on some type... seems generally to be OK now, I'll test on a larger screen too.