[Help a newby with a scrolling area, GSAP + Scroll Trigger]

🤦‍♂️, you sir are a star thank you so much updated pen:

See the Pen ZEMXRQY?editors=0010 by JV10 (@JV10) on CodePen

[Help a newby with a scrolling area, GSAP + Scroll Trigger]

Hi there,

 

thank you for the fast reply.

 

I have updated the pen:

 

 

Your ease helped but it seems that still stucks somewhere

[Help a newby with a scrolling area, GSAP + Scroll Trigger]

Quick question, is it my impression or in the above example every time we scroll it kinda gets stuck in each animation? rather than a smoother effect?

[Help a newby with a scrolling area, GSAP + Scroll Trigger]

Just to close this, I have now finished the animation, I will update the codepen as soon as possible.

 

Thank you for all the help

[Help a newby with a scrolling area, GSAP + Scroll Trigger]

First of all thank you @mvaneijgen for your help.

 

It is a great idea to get everything working before adding scrollTrigger.

 

I was able to get exactly what I wanted now. With only two showing 😃 

 

Now to add the scrollTrigger what the best approach is?

 

 

Edited:

 

What I mean by my question, is like did the code above is good in terms of standards to add the scrollTrigger? and also, how can I ensure that the first image and text has opacity 1 from the start?

 

[Help a newby with a scrolling area, GSAP + Scroll Trigger]

I am trying to achieve a full-height section that gets pinned when the user reaches it.

 

As an example the area would start like this (full width)


then if the user scroll the image would change and the bottom part would scroll up making the 8x the crop yield opacity 1 and show the next:

 

 

 

I am not 100% if my codepen reflects exactly what I am trying to do, I believe the images are ok it is working, problem is the scrollable content. first do I need to put it position absolute? How can I scroll between elements? is there a way to set a class like active to the current element and prev next to the corresponding ones?



Thank you in advance

See the Pen ZEMXRQY by JV10 (@JV10) on CodePen