Jump to content
GreenSock

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

Transform: Translate still uses -33.3333% on Nav Click

Recommended Posts

Hi all,

 

This is my first topic and I hope I have done this correctly.

 

The issue is that when I scroll through the site the transform: translate -33.3333% works perfectly, but when I click the nav.li (.section2) the transform:translate still uses the pin from #main and thinks it needs to do -33.3333% again.

 

How can I set the transform:translate to x: 0 when I click the nav li.

 

Unfortunately my Codepen does not replicate the issue.

 

Any help is appreciated.

 

Thanks in advance,

 

Regards,

Nick

See the Pen gRjyLK by NRice77 (@NRice77) on CodePen

Link to comment
Share on other sites

Hi @NRice77 :)

 

Welcome to the forum.

 

Looks like you've got some ScrollMagic code in there, but I'm not seeing the necessary ScrollMagic scripts being loaded in your pen. Here are the links you'll need.

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js

 

I'm also a little confused by you mentioning that the CodePen doesn't replicate the issue. Does that mean this is only a local development problem?

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

HI @PointC 

 

Thank you, i'm very happy to be here.

 

I have the cdn's in the local but forgot to put them in the codepen - I will add them now and see how we go.

 

Here is the edited Codepen link: 

See the Pen gRjyLK by NRice77 (@NRice77) on CodePen

Still can't replicate the entire scroll but basically, when you go from top to section1, then horizontal to section2, it works perfectly okay. But, when I click the #by-laws (li link) it scrolls to section2 (as it should) but the -33.3333% starts at #main which is the start of section1 - so what happens is we get the -33.3333% also on section 2, which shows the 100vh (color: red) but also another 100vh white page.

 

I can't figure out in js how to get section2 on li click to start at x: 0.

 

Any help is greatly appreciated, and yes I am still learning JS, so go easy :D

 

Cheers,

 

Cheers,

 

  • Like 1
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.
×