Jump to content
GreenSock

milko

ScrollTrigger "jumping" x2?

Recommended Posts

Hello guys!! First of all I have to say how happy I am to finally overcome my fears and get to try the famous 'gsap'! Thank you for your hard work!! Now onto the issue.. Sorry I didn't know where else to grab some help..
I want to implement it in a client's project inside Webflow, and I thought I was doing good but..

Expected output: Taimen logo (#taimen) on first scroll will just be resized to ~300px and after this, scroll continues normally. Ideally no position changes.

1. When serving it from my node/localhost the script loading was instant, but now that it's served from the cloud there is a weird jumping, I think probably after the ScrollTrigger is connected? 
2.  Although it does somehow works , when opening and closing the .nav-expand from hamburger menu, which is also controlled from gsap, the the resizing of the logo after the scroll and the whole .nav makes a weird flashing/jumping.

PS: is my approach to the resizing of the logo on "first scroll" correct? (in case the approach is correct, I can't seem to solve this case: when user has scrolled and the logo is resized - if user clicks the hamburger menu there is a severe white space which breaks the layout (image attached). Probably due to pinning?) 
Argh. Feeling so lost here.

Site link (made in Webflow): https://cfv2colstarter-ba45ccc944d42500d90b08c7.webflow.io/ 
CodeSandbox (for gsap - they are connected): https://codesandbox.io/s/taimen-jn3rn6?file=/index.js
(Inspiration https://www.stord.com/ (but in my case I need only the 1st scroll))

chrome_R9EO2H0vKQ.png

Link to comment
Share on other sites

Hi @milko and welcome to the GreenSock forums!

 

For the first issue, yeah probably there could be something related to the styles being applied before the JS code kicks in or maybe something else.

 

For the second issue, perhaps you should pin the entire section. There is a weird issue since the nav bar is not pinned, but then it jumps into view after ScrollTrigger's end marker.

 

Unfortunately you created a sandbox using a static template and you didn't include any HTML that works with the JS you provided on the index file. Please do your best to create a simple minimal demo that shows what you are doing right now and what you're trying to achieve, in order to help you with this.

 

Happy Tweening!!!

Link to comment
Share on other sites

Hey @Rodrigo! Appreciate your answer maan, thank you!


Unfortunately, since this is Webflow, a nocode tool i am unable to reproduce the issue in another container either because it doesnt allow me to export the elements correctly or due to coding inability!

Link to comment
Share on other sites

Mhhh... yeah I remember dealing with a project that was started with webflow, the exported CSS and HTML were a little hard to follow and understand. Long story short, is now a static website generated with NuxtJS 🤣 since we ditched webflow completely.

 

Honestly I don't know what can be done about this, since we're unable to properly debug this in order to solve the issue you're having. The worst thing is that I'm pretty sure that the solution is quite simple.

 

Hopefully another user that has integrated GSAP with webflow could chime in or perhaps you can approach the webflow support team and ask them about it, perhaps they  could offer some insight regarding this.

 

Again, sorry that I can't be of more assistance regarding this.

 

Happy Tweening!!!

Link to comment
Share on other sites

Hi @milko,

 

I have taken a brief look at your issue here. It looks like you have two id's of "taimen". This could be causing that little glitch. Maybe try removing one of them or making it "#taimen-mobile" or something like that. 

 

Hope that helps, if not I can take another look :)
 

  • Like 1
Link to comment
Share on other sites

Hello gsap community!

I just had a very similar issue, also in webflow, and im also a 100% gsap newbie. I had a jump of a tweened div at the start and the beginning. What helped me was changing the div's parent display from block to flex.

  • Like 1
Link to comment
Share on other sites

4 hours ago, Geoff Dawes said:

Hi @milko,

 

I have taken a brief look at your issue here. It looks like you have two id's of "taimen". This could be causing that little glitch. Maybe try removing one of them or making it "#taimen-mobile" or something like that. 

 

Hope that helps, if not I can take another look :)
 


Thanks @Geoff Dawes
Unfortunately this didn't work! :( @___wtem___ neither did the display:flex 😕
I've noticed that after expanding the navigation there is a horizontal overflow/overscroll.  

I have forgotten about the second same #taimen ID, but it seems that this wasn't the problem. Maybe my overall approach is the issue? I mean even if this works, how will I make it always be on top so there is no negative space between the expanded nav and the navbar itself? 😕

Link to comment
Share on other sites

Are you able to share a read-only link? 

It must be something to do with how it was setup in Webflow. 

Link to comment
Share on other sites

@Geoff Dawes and @___wtem___,

 

Thanks a lot for contributing to this thread 🥳

 

We really appreciate your help and input!

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Hey @milko,

 

I think this has something to do with your pinning. From the code it looks like the nav is being pinned when the top of the div is at the top of the screen.  So when you open the .nav_expand to a height of 70vh, the nav div is no longer at the top of the screen. I think this is what is causing the problem. Maybe you can try putting the .nav_expand div inside the .nav (pin trigger) so that even when it expands, the .nav is still at the top of the page.

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