Bounce in from bottom in timeline

[Maartjevk]

Hey, 

 

I cannot seem to see why my code is not working. I'm trying to create a smooth transition from the start text to the end text. That works good. But now I want to let it come from an bottom offset off, let's say for now, 100px.

So when you scroll the first title and text fade out, then the next title plus text fades in, but also moves up from the bottom. Does that makes any sense?

See the Pen KKbdqEE by mvkranen (@mvkranen) on CodePen

[mvaneijgen]

Hi @Maartjevk welcome to the forum!

 

Let's start simple. 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. 

 

I've moved your html around, so now we have just two .text element with both their own content. With CSS I've positioned them right on top of each other, so they take up the same amount of space. 

 

Some CSS properties are not able to being animated, display is one of them, so I've removed them from your GSAP code. How is the below animation looking, is that wat you want to animate on scroll? 

 

Ben erg benieuwd of dit het is want dan kunnen we daar op verder 😉

 

See the Pen oNJjoox?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Maartjevk]

Ah top, dankjewel @mvaneijgen! This is exactly what I needed.

 

So if I understand correctly it is better to just animate one div instead of multiple with an querySelectorAll? I modified my Codepen and re-added the scroll function. It now works how I imaged.

 

For future development, if I want to add another animation it is best to first develop it without scrollTrigger?

[mvaneijgen]

11 minutes ago, Maartjevk said:

So if I understand correctly it is better to just animate one div instead of multiple with an querySelectorAll?

Not in particular, but it is better to group the elements you want to animate. In your original example the titles were grouped and the paragraph elements were grouped, but what you wanted to do is animate a title and a paragraph together, so having them separated made it harder. 

 

14 minutes ago, Maartjevk said:

For future development, if I want to add another animation it is best to first develop it without scrollTrigger?

It is a balance, but in most cases yes. How I do it is first develop the animation, then add ScrollTrigger to it, to see how it feels. Then when the animation needs tweaking I disable ScrollTrigger again, and go back and forth until everything is done.

 

I've made one tweak to your pen, instead of your second tween being a .fromTo() I've changed it to .from(). In most cases you don't need a .fromTo(), because your element is probably already at the end or start position.  In your case y: 0 and opacity: 1 are the defaults of the browser, so you don't have to define them. The one is not better then the other, but personally I find .to() and .from() tweens easier to read (and maintain).

 

Houdoe!

 

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