Overlapping card effect

[Dave Dublin]

Hi 

If anyone can help I'd appreciate it.

I am trying to achieve the effect of blocks overlapping as you scroll down but I am having trouble.

I am not too knowledgable on the scrolltrigger code but I am trying to achieve a simpler version of what is on this site: 

https://weltio.com/about/

Also is there a callback function for when the scroll effect has initiated?

I'd like to be able to add a fade effect to the previous slide.

I've been looking through the documentation but having trouble finding a solution

 

Thanks

Dave

See the Pen dyeYdRK by davedublin (@davedublin) on CodePen

[Cassie]

Hey there!

 

Top tip for scrubbed animations like this is to put ScrollTrigger down. It sounds unintuitive but just back away from it for now. 😂

Start off by making the animation using GSAP. Have you got experience of tweens or timelines, where are you coming from knowledge-wise?

[Dave Dublin]

Thanks for the reply but I don't really have much experience at all with gsap.

I just used scrolltrigger once before for a horizontal scroll and it worked ok.

I saw a solution to a similar problem in the link below but I'm looking for the reverse of it.

 

My experience is in JS and css normally.

[Cassie]

Ok, so ScrollTrigger is a GSAP product. It's just a way of controlling GSAP tweens and timelines using scroll

Here's a very basic GSAP timeline (I've commented out the start and end panels for now so you can see what's happening)

See the Pen YzLyjpm by GreenSock (@GreenSock) on CodePen

Mess around with that until it looks right. If you want to change the position of the tweens (e.g. add a delay between them) then you can look at this article for guidance
 

When you're happy you can hook it up to scroll using scrollTrigger.

See the Pen GRdpBvp by GreenSock (@GreenSock) on CodePen

I also recommend starting on GSAP basics first. Starting with ScrollTrigger is one of the most common learning speedbumps we see around here!

 

[Dave Dublin]

Thanks for sending through.

 

I was hoping for the animation to flow with the scroll of the page, not animating by itself.

so if you scroll slowly down the page, the blocks will overlap slowly, or if you go the other way, they reverse.

Just like this example, but imagine the browser being upside down: 

 

 

 

[Cassie]

I understand that.

I'm trying to explain to you how to approach something like this rather than just jumping to the end result. I was giving you a step by step walkthrough.

First - create an animation, use a timeline, make use of the position parameter, set it up correctly in your CSS

Second - hook it up to scroll, work out the best start and end positions, adjust scrub speed

As I said -
 

Quote

I also recommend starting on GSAP basics first. Starting with ScrollTrigger is one of the most common learning speedbumps we see around here!

ScrollTrigger doesn't exist in a vacuum. It controls GSAP animations. The best way to get results is by creating those animations first.

[Dave Dublin]

ok gotcha. I'll give it a try

 

Thanks

D

[mvaneijgen]

What I would do is first layout the cards on top of each other with CSS, this way they are already at their end position. Then you would need to calculate how far down they need to move on the page and make that the .from() tween with GSAP. That is indeed the exact opposite of the current demo, there the cards layout all underneath each other and got stacked with GSAP on top of each other. 

 

So to get the desired effect you will need to change the layout with CSS, create the animation with GSAP and when you're done hook it to ScrollTrigger. 

 

48 minutes ago, Dave Dublin said:

My experience is in JS and css normally.

 

Maybe if I have some free time later I could take a look at it, but if you already have experience with JS and CSS, the hard part now is to lay it out correctly with CSS. Adding GSAP and ScrollTrigger will be easy when you've that figured out

[Dave Dublin]

Thanks for the reply, I'll see how I get on

D

[Dave Dublin]

Hey Cassie & mvaneijgen

Thanks so much for the help.

I worked through the timeline animation part and then added your scrolltrigger part, it's intuitive when you get into it

Result below:

 

Dave

[Dave Dublin]

Sorry just one last thing. How do I slow it down?

I added duration:0.2 to a timeline state but that didn't really do anything.

It seems to go faster than the scroll.

 

And is there a way to know which 'card' is active/animating?

I'd like to add a class

 

Thanks

Dave

[mvaneijgen]

Yeah that is hard to wrap your head around at first. GSAP animates a timeline over X amount of seconds, let's say 10, if you then hook it to ScrollTrigger it will animate that 10 seconds over (let say) a 1000px. If you want to increase the time it takes, you'll have to increase the `end:` value of your ScrollTrigger to a larger value, than it takes a longer scroll distance and will the original 10 seconds be stretched over the new scroll distance.