Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fogseller

Is this possible with ScrollTrigger pin?

Recommended Posts

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 :)

Link to post
Share on other sites

@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

  • Like 2
Link to post
Share on other sites

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 👍

Link to post
Share on other sites

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.

  • Like 4
Link to post
Share on other sites

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 :) 

  • Like 1
Link to post
Share on other sites

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

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×