Pinned section synchronized with scrolling section

[Nephtys]

Hello Scrollers ! 

 

First time I ask for some help on the forum, but I'm a bit stuck at the moment with my portfolio's slider.

 

The idea is to have the thumbnail on the left, and the infos on the right. 

Everytime the user scrolls 100vh, the thumbnail and the infos change.

 

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

I found this codepen, which is close to what I am trying to achieve, but I still have three problems :

 

1. I don't understand how, but the right side of the animation doesn't work properly. The first element should be at top:0 when the animation starts ;
2. When the user scrolls, my element starts by going down, and then up, but it should directly go up ;
3. I cannot figure out how to pin the right element until the user scrolls 100vh everytime + I don't understand why the other elements are still in opacity: 0, and not visible on screen.

 

If anybody could enlighten me, it would be nice !

 

Thanks,

A GSAP newbie

See the Pen oNqqoKX by chrysacier (@chrysacier) on CodePen

[mvaneijgen]

Hi @Nephtys welcome to the forum!

 

With ScrollTrigger it is best to first focus on the animation. Just write your logic in a timeline and after that works like you want to add ScrollTrigger to it. This way you split up the work and you can focus on one thing at a time.

 

A ScrollTrigger starts at a certain position and ends some where, if you want to have something happen every 100vh you'll have to set the `end:` to something like  trigger to: 100vh  * number of elments and space your animation on that logic.

 

Also take a look at `yPercent` instead adding a percentage to `y`. 

 

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

 

 

 

 

[Nephtys]

1 minute ago, mvaneijgen said:

Hi @Nephtys welcome to the forum!

 

With ScrollTrigger it is best to first focus on the animation. Just write your logic in a timeline and after that works like you want to add ScrollTrigger to it. This way you split up the work and you can focus on one thing at a time.

 

A ScrollTrigger starts at a certain position and ends some where, if you want to have something happen every 100vh you'll have to set the `end:` to something like  trigger to: 100vh  * number of elments and space your animation on that logic.

 

Also take a look at `yPercent` instead adding a percentage to `y`. 

 

Hi mvaneigen !

 

Thank you so much for your approach. It is way easier to disconstruct the process in an animation, first, and then a scrollTrigger event !

I will have a look at it and see if it gets clearer for me !

 

Nephtys

[mvaneijgen]

@Nephtys cool! I did some more digging in your pen. I would start off by positioning your elements correctly with CSS. You want all the `.info` panels on top of each other, because you want them too animate all from the same starting position (this is also what the first demo you posted does, so try and choose and pick logic from that one). Then when you're happy with the animation you could add a ScrollTrigger to the container of all the elements and pin this container, then connect the timeline to that scroll trigger and have it animate over a height of three times the window height. 

 

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

 

Be sure to post back here if you stuck or you've got the solution!

[Nephtys]

Hi mvaneijgen !

 

I'm back after playing around all the numbers in here  It really makes me realize I have to improve my knowledge of JavaScript.

Here is what I have made, and where I am stuck (It's nearly perfect ) : 

See the Pen poLLLgw by chrysacier (@chrysacier) on CodePen

 

I still do not understand three things :

1. Is there a simple way to link the left images scroll with the right one ? ;
2. Where does that 100vh spacing at the end of the three right panels come from ;
3. How can I change the speed of the right panel transition? I tried to change it in the ´tl´ duration, but I didn't notice a difference. I used to set a larger ´end´ point, to slow it down, but I guess it is not the correct way to do it (I'm pretty sure this one might be in the documentation, so my apologizes for asking).

Thank you for your help, once again, it's really motivating to discuss with member from the GreenSock community !

[Cassie]

I really suggest giving this video a watch too - it's a really nice accessible explanation of how ScrollTrigger works!
 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

[Nephtys]

22 minutes ago, Cassie said:

I really suggest giving this video a watch too - it's a really nice accessible explanation of how ScrollTrigger works!
 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

Thank you so much Cassie, I will have a look at it, better not skip the steps ! 

 

Nephtys