Is this possible with ScrollTrigger pin?

[fogseller]

Hi guys, is it possible to make something like this with ScrollTrigger pin?

https://katiforner.com/

scroll to "Featured project"

note the parallax effect between images and at the same time on the left side background colour change and header fade in and out,

and after 3 slides scroll is unpinned and back to "normal"

 

thank you

[b1mind]

@fogseller I think you mean ScrollTrigger plugin as "scrollmagic" is not a GreenSock plugin its another js lib entirely.

 

What you want to achieve is totally doable though with GSAP.ScrollTrigger! here is an example you could use to get started! If you have a specific question about gsap or scrolltrigger make a minimal codepen of the issue then explain it well, and you are bound to get lots of help! Enjoy!

 

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

[fogseller]

Thank you  @b1Mind yeah, ScrollTrigger, of course ? i got it right in the title ??

i saw the example you send, and it is a good start, but katiforner.com example is little complicated version of that.  The screen is split in half, images have paralax effect or even two, and at the same time on the left side we have other things going on. It’s too complicated for me to understand by myself since i’m not professional like you guys ?

thank you ?

[ZachSaucier]

I actually recreated this exact effect in this pen: 

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

 

The image animation you just add as an animation attached to the ScrollTriggers.

[fogseller]

YESSS! thank you @ZachSaucier ?   ?.   ?    

[fogseller]

Hey @ZachSaucier trying to make a Frankenstein with this two babies: 

 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d?editors=1010 by GreenSock (@GreenSock) on CodePen

+

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

=

See the Pen bGExgjO by fogseller (@fogseller) on CodePen

 

unfortunately, I suck ?

is it even possible?

 

[ZachSaucier]

Most anything is possible. However, things like this are not easily compatible. Notice that the snapping sections pen makes use of GSAP's ScrollToPlugin to intercept the normal scroll behavior. You'd have to replace this with a Locomotive Scroll's .scrollTo() method to animate the scroll position but it doesn't seem to like to be called during a scroll with a touchpad or magic mouse. Either way, it's not really a GSAP question so we might not be able to help you much more with getting it to work  

[fogseller]

@ZachSaucier fair enough  i will just forget it and learn something else, cheeers! ?

 

[MaryMax]

Hi
When I change the height of the section to 50vh everything gets messed up going downward, although it seems to be Ok in upward direction. How can I solve this?

See the Pen VwdeKGE?editors=0010 by MaryMax (@MaryMax) on CodePen

[GreenSock]

1 hour ago, MaryMax said:

When I change the height of the section to 50vh everything gets messed up going downward, although it seems to be Ok in upward direction. How can I solve this?

It's just a logic thing. If you set the section height to 50vh, that means you'll have TWO on the screen at any given time but you set up you start value for the ScrollTriggers such that they'll get tripped when the sibling's ScrollTrigger does its scroll. It may help for you to turn on markers just to visualize it a bit. 

 

I assume you wanted something more like this (which simply adjusts the start values to accommodate what you're trying to do): 

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