Jump to content
Search Community

gsap + scrollmagic - end animation when block ends

elenika test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

good Day, everyone :)

 

I have such problem: I need to bind to scroll of right section (where  the text is) ancors from the left part and when I scroll a certain section - I want left button to show in what topic block I am during scrolling  by its color . I made it , but  it doesn't work a proper way :_(   maybe you have ideas how to end animation exactly when topic block ends, not depending on vh? 

 

Thanks!

 

See the Pen NYYyLm?editors=1010 by elenikaom (@elenikaom) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I'm not really understanding the question. It sounds a bit complicated. 

I'm not sure if your question has to do with ScrollMagic (not our product) or a more general javascript question.

 

Unfortunately GSAP doesn't have tools for detecting when certain objects are in the viewport.

If you need help understanding ScrollMagic triggers and other features perhaps try posting in https://github.com/janpaepke/ScrollMagic/issues

 

If you have a question that relates to the GreenSock Animation Platform please let us know, we will be happy to help.

 

  • Like 3
Link to comment
Share on other sites

Yeah - I'm with @Carl here. I'm not really understanding the question. I think you want the buttons on the left to trigger their opacity when the corresponding section hits a certain point? You're combining some jQuery toggles with ScrollMagic .setClassToggle and GSAP window scroll tweens. I had trouble following the demo with all that. One thing that does stick out and is causing an error is your triggerHook in the global scene options. You have triggerHook: ".topic-wrapper", but that is not a valid value. I'm not sure you need the duration in there either since you're just toggling classes. I think something like this would work better:

 

 var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 0.1,
    offset: 100,
    reverse: true
  }
});

 

As Carl mentioned, you'll probably have better luck on the ScrollMagic forum. If you want to simplify your demo a bit and use GSAP for everything we can probably offer some additional guidance about the GreenSock elements of your project.

 

Happy tweening.

:)

 

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