ScrollTrigger Animation Help Needed

[cR_BLue]

Hi, Im quite new to gsap, and wanted to create an animation that will show following animation i wanna create.

 

1)Basically it is a card stack type of animation

2)When each 「.mv-wrap」 reach their own respective「 strollTrigger : 'center center'」condition, 「.mv-overlay」will trigger and opacity change to 0.6.

3)Then  「.mv-wrap」 reach their own respective「 end」condition, 「.mv-blur」will trigger and 「filter: blur」 will apply effect to mv-blur.

4)Finally, text will scroll up until it reach the top its respectione 「.mv-wrap」top.

 

I have been struggling for few days and yet cannot write the code i wanted to apply. Can someone help?

 

*sry for my bad english

 

See the Pen QwyOYMg by Charles5BLueER (@Charles5BLueER) on CodePen.

[mvaneijgen]

Hi @cR_BLue welcome to the forum!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

Currently you have an error in your Javascript `TypeError: null is not an object (evaluating 'header.offsetHeight')`.

 

Also it is best to keep your question simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Here a fork of your pen with some tweaks how I would set it up. It is just an interpretation of your question because I'm not sure exactly what you're asking. I’ve placed some comments in your JS to better explain things, please be sure to read through them! The main thing of this setup is focus on building an animation and worry about the scrolling part later!

 

Hope it helps and happy tweening! 

 

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

 

[cR_BLue]

Hi @mvaneijgen, thanks for the advice and fixing  my code.

 

However, i want the first .mv-inner always  stuck at the top of the mv-wrapper, is it possible to do that?

 

Something like this:

 

 

while having the animation I mentioned before being applied when scrolling?

 

[mvaneijgen]

Yeah sure, just adjust the animation to not include the first one!

 

These are just quick sketches and by no means the best solution for your animation. I would just start developing your animation and post back here when you get stuck. 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

This setup uses fancy staggers, but note that you can also just write out your animation step by step, this is more work, but often the best way to get to a state that you're happy with your animation. There is always time to optimise your code later, I've written a post all about it.

 

 

Hope it helps and happy tweening! 

 

See the Pen MYKrgrQ by mvaneijgen (@mvaneijgen) on CodePen.

[cR_BLue]

Hi @mvaneijgen , thanks for the advice.

 

I cant believe i never thought about the something basic like first-child can be in gsap.

Guess sometimes the most basic things are the most obvious and I need to study more about gsap

 

Thanks for helping