Jump to content
Search Community

Animation duration & Scroll speed

Christos Tsangaris test
Moderator Tag

Recommended Posts

Hi!

 

This is my first post as I have just started exploring the front-end development.

 

I am using GSAP in conjunction with ScrollMagic.

 

For some reason, when i scroll, the animation will not follow the duration as declared in the timeline, but it will start executing based on the duration declared in Scene. The problem is that when the user scrolls through the animations, at some point the animations end, and the page is scrolled down very fast, as if we don't have control over the scrolling.

 

I was reading this post (

) yesterday [which was very informative], but if i go and remove duration from Scene, then pushFollowers is disabled and the section overlaps with content below..

 

Any idea how to tackle this?

 

Thanks in advance!

Link to comment
Share on other sites

Welcome to the forums, @Christos Tsangaris

 

Unfortunately ScrollMagic isn't a GreenSock product and we don't really recommend using it. You could try contacting the author with your questions, but I don't think he's been very active for a while. The good news: we're working on a GreenSock tool that can do very similar things to ScrollMagic. I think you're gonna love it. But it may not be available for another 3-6 weeks (no promises...we're in the early stages right now).

 

Good luck with your project! Let us know if you have any GSAP-specific questions. We'd love to help with those. 

  • Like 1
Link to comment
Share on other sites

Just now, GreenSock said:

Welcome to the forums, @Christos Tsangaris

 

Unfortunately ScrollMagic isn't a GreenSock product and we don't really recommend using it. You could try contacting the author with your questions, but I don't think he's been very active for a while. The good news: we're working on a GreenSock tool that can do very similar things to ScrollMagic. I think you're gonna love it. But it may not be available for another 3-6 weeks (no promises...we're in the early stages right now).

 

Good luck with your project! Let us know if you have any GSAP-specific questions. We'd love to help with those. 

Hi there! Thanks for the instant response!

 

I think I can wait for a while to get something that will be maintained by you guys!!

 

A quick one: Can i start playing the timeline animations at a specific section of my website and not just after the page is reloaded?

 

Thanks again!

Link to comment
Share on other sites

2 minutes ago, Christos Tsangaris said:

A quick one: Can i start playing the timeline animations at a specific section of my website and not just after the page is reloaded?

Do you mean a "section" that you scroll to? You want to pause the animation until the user gets there? That's what our new tool will handle. For now, you could certainly accomplish that with something like IntersectionObserver or manually watch the scroll position. I don't have a pre-baked solution for you right now, sorry. There are plenty of threads in the forums that discuss IntersectionObserver. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

1 minute ago, GreenSock said:

Do you mean a "section" that you scroll to? You want to pause the animation until the user gets there? That's what our new tool will handle. For now, you could certainly accomplish that with something like IntersectionObserver or manually watch the scroll position. I don't have a pre-baked solution for you right now, sorry. There are plenty of threads in the forums that discuss IntersectionObserver. 

 

Happy tweening!

Thanks!!

Link to comment
Share on other sites

Until we have the scroll plugin, to animate thing on scroll you have to use either the scroll position or the intersection observer API. Here's a basic demo using the scroll position: 

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

 

And here's an article that talks about using the intersection observer API with GSAP: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

  • Like 2
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...