Jump to content
Search Community

Gsap fro scrolling and pinning help please!

neuhaus3000 test
Moderator Tag

Recommended Posts

Hey neuhaus3000. 

 

ScrollMagic isn't a GreenSock product and we don't really support it or recommend it. You can create the same effect without SM.

See the Pen BaNPoEK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also, if you're seeking help debugging, please include a minimal reproduction of just the relevant parts related to the issue in a CodePen or something. See the below thread for more info:

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ 

  • Like 3
Link to comment
Share on other sites

Hello everyone!

 

Sorry to post several messages for the same questions.

I know that this forum doesn't support ScrollMagic and this is the reason why I'm seaking your help.

I want to create what you see in the CodePen URL (deleted from this post) but entirely with GSAP.

 

  1. Pin a section (I don't want it to shift left though)
  2. Scroll images vertically with the scrollbar (parallax)
  3. When finished, scroll logos horizontally to the left of the screen.

 

Any ideas will be appreciated!  Sorry again for the multiple messages.

 

Thanks!

 

neuhaus3000

 

 

 

 

 

Link to comment
Share on other sites

Hey neuhaus3000. We do not have the capacity to do everything for you. Please try to do it (without ScrollMagic) yourself and let us know what specific issues you run into. And when posting here, please remove all parts of the demo that are not related to what you're asking about.

 

As I posted before, the basic setup of doing this sort of animation on scroll can be seen in this demo:

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

 

Please do not create new threads every time, continue posting in this thread. 

  • Like 1
Link to comment
Share on other sites

6 minutes ago, neuhaus3000 said:

Is there a way to pin the black section?  So the animation starts only when we arrive on it?  Because when the window is less high, the animation is too fast.

You'll likely want to make this two different timelines, or make a delay relative to the window height to accommodate for positioning.

 

This might be helpful for multiple animations in a single scroll event (each box is its own animation, even though in this case they are the same):

See the Pen wvapdQd by elegantseagulls (@elegantseagulls) on CodePen

  • Like 2
Link to comment
Share on other sites

1 minute ago, neuhaus3000 said:

I'm I adding it to the right place?

You're only adding one timeline to scrollTL. You'll want to break each animation into its own timeline/tween and add them to scrollTL with the proper delay/offset for their position, which is essentially what the forEach loop is doing in my pen.

  • Like 2
Link to comment
Share on other sites

14 minutes ago, neuhaus3000 said:

I read the doc... Unfortunatly, I'm not finding my error for .sticky section to pin.

 

I'm not entirely sure what you're asking at this point. I do see that your delay/offset is the same when you add both timelines to scrollTL. Is this intentional? Also, you have a for loop looking for multiple '.sticky' classes on the page when you only have one. Will this be a repeating section on the complete site?
 

Link to comment
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.
×
×
  • Create New...