milko Posted September 18, 2022 Share Posted September 18, 2022 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)) Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 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 More sharing options...
milko Posted September 19, 2022 Author Share Posted September 19, 2022 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 More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 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 More sharing options...
Geoff Dawes Posted September 22, 2022 Share Posted September 22, 2022 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 1 Link to comment Share on other sites More sharing options...
___wtem___ Posted September 22, 2022 Share Posted September 22, 2022 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. 1 Link to comment Share on other sites More sharing options...
milko Posted September 22, 2022 Author Share Posted September 22, 2022 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 More sharing options...
Geoff Dawes Posted September 22, 2022 Share Posted September 22, 2022 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 More sharing options...
milko Posted September 22, 2022 Author Share Posted September 22, 2022 23 minutes ago, Geoff Dawes said: Are you able to share a read-only link? It must be something to do with how it was setup in Webflow. Webflow Read-Only: https://preview.webflow.com/preview/cfv2colstarter-ba45ccc944d42500d90b08c7?utm_medium=preview_link&utm_source=designer&utm_content=cfv2colstarter-ba45ccc944d42500d90b08c7&preview=4f45f495fffbea24956c1168c351c6e5&workflow=preview CSB: https://codesandbox.io/s/taimen-jn3rn6?file=/index.js Live: https://cfv2colstarter-ba45ccc944d42500d90b08c7.webflow.io/ Link to comment Share on other sites More sharing options...
Rodrigo Posted September 22, 2022 Share Posted September 22, 2022 @Geoff Dawes and @___wtem___, Thanks a lot for contributing to this thread 🥳 We really appreciate your help and input! Happy Tweening!!! 3 Link to comment Share on other sites More sharing options...
Geoff Dawes Posted September 23, 2022 Share Posted September 23, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now