Jump to content
Search Community

Animated Section with Scroll image and fade out text

20ldiego test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 :)

 

Link to comment
Share on other sites

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.
 

 

Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...