GSAP scrollTriger and ScrollTo combination

[4epeliuk]

Hello. I need help with some GSAP functions. 

I need to make a full-section scroll site with pinned elements. 

For example on this site   https://thestory.is/pl/ we have blocks witch scroll to the top and do some animation, I make and all works fine, but I need to make other sections with class .panel scroll like a full page.  
Another thing I need to do is scroll text in slides, for example, I scroll, and slide scroll to the top and stay there, then I scroll again and text .pain_point slide to the top and text .solution go visible, then I can scroll to next slide. 
here is my codepen: 

Tell me if you need some additional information, thx

See the Pen zYXyBXe by artemchepeliuk (@artemchepeliuk) on CodePen

[mvaneijgen]

Hi @4epeliuk welcome to the forum!

 

Personally I find it much easier to create a timeline for the full animation and have ScrollTrigger animate that whole animation. Right now you have an animation and a ScrollTrigger for each card. I've written a post how I go about creating these kinds of effects, check it out:

 

 

1 hour ago, 4epeliuk said:

Another thing I need to do is scroll text in slides, for example, I scroll, and slide scroll to the top and stay there, then I scroll again and text .pain_point slide to the top and text .solution go visible, then I can scroll to next slide. 

For this effect check out the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/

 

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

 

And here an example that mixes normal scroll with the Observer plugin

 

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

 

Hope it helps and happy tweening! 

[4epeliuk]

Hello, mvaneijgen, thx for replying, your answers are good, but when I try to use code from 

Quote

Mixed observer and scrolling...

 it blocks scrolls down after the cards done animation

[4epeliuk]

1 minute ago, 4epeliuk said:

Hello, mvaneijgen, thx for replying, your answers are good, but when I try to use code from 

 it blocks scrolls down after the cards done animation

 

 

 - check my previous codepen 

[4epeliuk]

another thing, I need to scroll section without a background, so a solution with a parallax slide effect is don't work for me(

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps

Happy Tweening!

[4epeliuk]

2 minutes ago, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Hopefully this helps

Happy Tweening!

hello, @Rodrigo, thx for the reply, but it is not what I looking for, I need a full section scroll, like some sliders, and one section can scroll with scrollTriger 

[Rodrigo]

Hi,

 

I still can't grasp what you're trying to achieve here. Are you trying to add animations inside the stacked cards?

 

It would be super helpful if you could provide a clear description of what you're trying to do and if possible a live demo of another app or site so we can get a clear idea of what you're trying to do.

 

Happy Tweening!

[4epeliuk]

2 minutes ago, Rodrigo said:

Are you trying to add animations inside the stacked cards?

yes, exactly, here is my codepen, you can see that I have cards with 2 text blocks .pain_point and .solution. 

these blocks need to change their positions when scrolling, .pain_point showing then scrolling down then .pain_point going to the top for -200% and  .solution shoving, but with some delay   or some scroll detection (for example scroll to 50px)
this is the second question and the first question is - make a full section scroll!

I have 5 sections, 4 of then need to scroll down by 100vh (like some sliders or full page scroll plugin), and one section with cards with regular scroll for ScrollTriger. 

I stuck this for week, help me pls) 
Or maybe it's not possible?

[4epeliuk]

1 minute ago, 4epeliuk said:

yes, exactly, here is my codepen, you can see that I have cards with 2 text blocks .pain_point and .solution. 

these blocks need to change their positions when scrolling, .pain_point showing then scrolling down then .pain_point going to the top for -200% and  .solution shoving, but with some delay   or some scroll detection (for example scroll to 50px)
this is the second question and the first question is - make a full section scroll!

I have 5 sections, 4 of then need to scroll down by 100vh (like some sliders or full page scroll plugin), and one section with cards with regular scroll for ScrollTriger. 

I stuck this for week, help me pls) 
Or maybe it's not possible?

see my codepen from first message

[Rodrigo]

This is possible but requires a bit of custom logic, you should expand from this demo @mvaneijgen already posted:

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

 

You basically have to keep track of every card when is at the top of the viewport and then enable the observer plugin in order to animate the elements of each card.

 

Another possibility is to keep everything in a single timeline and scrub the content of the stacked cards as well as the card stacking. In that scenario you should create the animation first and then add ScrollTrigger to the mix.

 

Unfortunately we don't have the time resources to make this for you. We offer paid consulting services and you can also post in the Jobs & Freelance forums to get help there.

 

Happy Tweening!