Jump to content
Search Community

Transform: Translate still uses -33.3333% on Nav Click

Guest NRice77
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

Guest NRice77

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

Guest NRice77

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,

 

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