Pinned section with reveal at the end?

[Crystal]

Hi,

I am new to gsap and love it. I am trying to reproduce a scrolling animation like here ->  

 

https://drive.google.com/file/d/1G2TyhqcYLDizmPMmHnmkcjUPhh7YK7yC/view?usp=sharing

i have managed to do the first part but cannot make the ending nice and smooth as well as having the section "snap" in place rather then scroll all the way. maybe my approach was wrong, can someone help and point out in which direction i should go to make this work ?

 

See the Pen LYRwzZP by mariatryta (@mariatryta) on CodePen

Edited January 26, 2021 by Crystal
edit url

[ZachSaucier]

Hey Crystal and welcome to the GreenSock forums. You've got a great start! Your approach is pretty much the right way of doing things, though personally I think it's a lot easier if you just animate properties directly with GSAP instead of toggling classes. That also will let you have more fine control over how things are animated.

 

One other note is that you're attempting to tween an element with ID title3 but you don't have that element in your HTML. Maybe you meant to apply it to your .fade-div element?

[ZachSaucier]

Also what do you mean by this?

19 minutes ago, Crystal said:

having the section "snap" in place rather then scroll all the way

 

[Crystal]

22 minutes ago, ZachSaucier said:

apply it to your .fade-div element?

Ah yes, there was supposed to be id on the h2 inside .fade-div So is there a way of making the animation of the last dark background slide more smooth or not appear so soon after the second title gets scrolled in ? 
 

by snapping i mean the when you scroll from the first title to the second i would like it to snap in place / center of screen rather then scrolling it in place. ( like scroll a bit and the title finishes sliding in on it's own) 
 

[ZachSaucier]

17 minutes ago, Crystal said:

is there a way of making the animation of the last dark background slide more smooth or not appear so soon after the second title gets scrolled in ? 

Do you mean like this?

See the Pen LYRweWJ?editors=0100 by GreenSock (@GreenSock) on CodePen

 

17 minutes ago, Crystal said:

by snapping i mean the when you scroll from the first title to the second i would like it to snap in place / center of screen rather then scrolling it in place. ( like scroll a bit and the title finishes sliding in on it's own) 

You'd need to structure things a bit differently to do that sort of thing. I'd probably create a timeline that does all of your animations in it (completely ignoring ScrollTrigger). Then when you create the timeline the way you want the animations to go I'd create a ScrollTrigger, attach the timeline, and do the pinning as necessary.

[Crystal]

Thanks for the help Sometimes it's overwhelming so it's nice to hear I am going in the correct direction!

 

4 minutes ago, ZachSaucier said:

Do you mean like this?

 

 

works as i wanted it, yes

[Crystal]

Actually one more thing, in your solution the text slides up while the dark background section is revealing, but it should stay in the middle of the screen 🤔

[ZachSaucier]

10 minutes ago, Crystal said:

in your solution the text slides up while the dark background section is revealing, but it should stay in the middle of the screen 🤔

I'd probably approach it like I said above:

21 minutes ago, ZachSaucier said:

I'd probably create a timeline that does all of your animations in it (completely ignoring ScrollTrigger). Then when you create the timeline the way you want the animations to go I'd create a ScrollTrigger, attach the timeline, and do the pinning as necessary.