TweenMax ScrollTo - Y and OffsetY parameter not working

[karamveer]

Hello All,

 

We're using ScrollToplugin and Tweenmax library with ScrollMagic plugin,noticed TweenMax-> Scrollto operation not working.

 

I want to pass OffsetY on the pinning element but TweenMax - offsetY parameter not accepting also scrollTo-> Y option not working with element-id only working with numeric value.

 

As mentioned on the greensock tutorial (https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/) for add some margin top we can use offsetY option with numeric value but unfortunately its not working,no any error in console log .

 

Please see this code-snippets    and suggest what else from our side?

 

 

Thanks in advance

 

 

Thanks,

Karamveer Singh

See the Pen xqjYQg by karamveer (@karamveer) on CodePen

[Dipscom]

Hi karamveer,

 

Have you debugged your code? There are some error with the ScrollMagic part.

 

If you comment the scrollMagic code out and put a value like "150" in your offsetY parameter, you will see the scrollTo plugin behave as expected.

 

I'm sorry I can't go over your scrollMagic code, at the moment, to see what you should do instead but, hopefully, the errors displayed in the console should give you enough information to fix it.

[PointC]

Yep - I noticed those ScrollMagic errors too. There's something odd happening in there, but I don't think it has anything to do with GSAP. I've used the ScrollTo plugin and ScrollMagic together several times with no difficulties so they do play well together.

 

Good luck debugging and happy tweening.

[karamveer]

Hello All,

 

thanks for your supports and helpful instructions, yeah I followed and now scrollTo with Tweenmax working fine.

 

But facing another issue I will be thankful to you if you can instruct me on this new issue - > 

 

highlighted another nav while scrolling : the previous one will stay highlighted during the scroll event, but I would expect once it reaches its targeted anchor link, it would no longer have the previous one highlighted and the item you clicked would be highlighted

 

 

Other Query: 

 

Please guide me how we can pass the OffsetY to tweenmax in mid of scrolling.

Actually in my application we're using two navigation (first on top of header)  and second after some gap(distance from header).During the scrolling we're hide the main header nav and second nav as fixed position.

The issue is I want to assign offsetY to tweenmax with both header height when both are visible and single nav(second) when header nav not visible.Please suggest your idea.

 

See this codepen snippets : 

 

 

 

 

 

 

 

Thanks,

Karamveer Singh

[Carl]

For your first issue, it seems you might want to have an onComplete callback on your scroll tween that calls a function that manages the state of the nav elements. 

If you have a variable to track the "currentSection" you can disable the currentSection and assign a new value to currentSection when your tween ends. Some people like assigning classes to their active elements and then when the tween is done you find any element with the active class, remove it and add the active class to the element that should now be highlighted.

 

Im very unclear on your second query but it sounds like you will need to asses the offsetY on each button press and create a unique and new tween each time based on the state of your app.

 

Unfortunately we really have to keep our support focused on the GSAP API. It becomes too much for us to try to assist with every logic and structural issue folks come up with. Looking at your 100+ lines of code I'm having trouble figuring out what it all does which makes offering solutions to your other problems much more difficult.