Animated Section with Scroll image and fade out text

[20ldiego]

Hello teachers,

I have this example, I need help with a combination of animations.

The idea:

With normal scrolling it stops at the top of the section (done) and with further scrolling it changes the content of the .container-sliders-wrapper (done)
but i need the following animations: the img goes to the top and disappears with the fadeout and the text just fades and changes with the other text content on the slide

I put a link with the real example: https://drive.google.com/file/d/1OKG0Ads2NYR1k073ERUrHwTQB9KuPofn/view?usp=sharing

I hope I explained well and you can help me

PD: I use vh value, please open the codepen an full view

See the Pen ZErPxrB by 20LDiego (@20LDiego) on CodePen

[mvaneijgen]

Hi @20ldiego

 

I restructured your pen a bit to make it easier to read/edit. I've created a timeline for your animations and move the ScrollTrigger to there. I always like to start with a timeline, because if you are not sure yet on how everything should work a timeline will give you a lot more options than just a gsap tween. 

 

I also had to add some CSS so that every `.slide-wrapper` was already at it's correct position  (I've made them all be on top of each other with `position: absolute`). With a timeline you can add multiple elements to the animation with their own tween and start at specific points, so at first the image comes in from the bottom, this tween uses a stagger, so it will animate each slider image every 1 second, but as soon as 1 second has passed the next animation will already fire and move the first image out of the way. The text animation does the same and starts as soon as the image animations starts (eg at 0). 

 

Read more here about the position parameters

 

A great thing to keep in mind is that ScrollTrigger just plays an animation, so if you first focus on just the animation and remove ScrollTrigger from your code, you get a better feel for what it's doing and when you are happy add ScrollTrigger again.

 

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

[20ldiego]

Hi mvaneijgen ,

thanks for your time.

 

I check your pen and I think it's amazing.

 

Just try to make a change, I prefer to show the first image and text when the animation starts, and when the animation ends the last image-text keeps showing (right now it disappears)

 

What I want is not to see white space while scrolling, because I add the same effect as '.slide-wrapper .description' for '.slide-wrapper .title-value'

That's possible?

I appreciate your help

 

[20ldiego]

4 hours ago, 20ldiego said:

Hi mvaneijgen ,

thanks for your time.

 

I check your pen and I think it's amazing.

 

Just try to make a change, I prefer to show the first image and text when the animation starts, and when the animation ends the last image-text keeps showing (right now it disappears)

 

What I want is not to see white space while scrolling, because I add the same effect as '.slide-wrapper .description' for '.slide-wrapper .title-value'

That's possible?

I appreciate your help

 

Today I'm work on this.

I'm update the pen, please check

See the Pen ZErPxrB by 20LDiego (@20LDiego) on CodePen

Maybe it clarifies what I want.
 

I would think there is a better way to handle animation when it is an array. But the first and last change the last position of the others. 😕
On the other hand, I can't correct the blank spaces that form between the images and the last two texts don't work well

If you have any suggestions or anything that can help me, I would really appreciate it.
 

 

[mvaneijgen]

Then I would do something like this. Just check if the it's NOT the first or the last in the animation and only then run the animation.

 

I even have add a label (timeline.add(`label-${index}`)) to the timeline to easily snap to those points in the animation. 

 

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

[20ldiego]

tk so much mvaneijgen