Kristy H Posted January 21, 2022 Share Posted January 21, 2022 Hey folks - running into an issue with developing a smooth horizontal scroll. I'm building in Wordpress (using pro). When I feed in raw html, the horizontal scroll is buttery smooth. When I try to use the builder, I get a real jerky scroll. I have a feeling there's a simple solution, I just can't find the problem. Help is appreciated - thanks! here's the same info on a wp page: https://kristyleehanson.com/testgsap/ (and yes, I'll be sharing this on a wp forum too). See the Pen poWXxGW by lukefinsaas (@lukefinsaas) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 21, 2022 Share Posted January 21, 2022 I think this is because your CodePen isn't working the same as your dev site... on line 29, sections is not defined. This could also be causing some JS issues in your WP site that are causing unexpected behavior. 2 Link to comment Share on other sites More sharing options...
Kristy H Posted January 21, 2022 Author Share Posted January 21, 2022 So this is the same exact JS I use when I load raw content (straight up HTML) into my dev site and the scroll works great - real smooth. The issue is when I try to use the builder. I'm trying to avoid handcoding everything and am running into problems. There's some funky communication between the WYSIWYG builder and the JS (the link above). In both instances, the sections is not defined on line 29 (but the script runs on the raw content and not the builder). Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 21, 2022 Share Posted January 21, 2022 9 minutes ago, Kristy H said: So this is the same exact JS I use when I load raw content (straight up HTML) into my dev site and the scroll works great Is the CodePen working as expected? If so, anything after line 29 is not being run in the CodePen (as it's broken), so I'm thinking that could be the issue... Maybe try deleting that? 2 Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 21, 2022 Share Posted January 21, 2022 It looks like you have CSS in your WordPress instance that's adding a transition to each section that's fighting with the GSAP animation. You shouldn't have CSS transitions that conflict with GSAP's transforms. 3 Link to comment Share on other sites More sharing options...
Kristy H Posted January 21, 2022 Author Share Posted January 21, 2022 Totally - this may be the crux of my question. I've deleted the script post line 29 and the horizontal scroll is still jerky. As I haven't written ANY CSS transitions - can I ask where you're seeing these? They may be inherited through my compiler and I'm just not seeing then. Link to comment Share on other sites More sharing options...
OSUblake Posted January 21, 2022 Share Posted January 21, 2022 They're all over your page if you inspect your elements. This is just from the first thing I right-clicked on... 2 Link to comment Share on other sites More sharing options...
Kristy H Posted January 21, 2022 Author Share Posted January 21, 2022 Yeah, I'm aware of all of those CSS animations and of how to inspect my elements to see them. Maybe I'm not asking the question specifically enough or this isn't the forum for it. I'm wondering what CSS transition folks are seeing that is bumping into my GSAP JS positioning - as in, what is the issue when I'm using the compiler versus inserting raw HTML into the compiler. When I'm using the theme, but inserting Raw Content into an element, the scrollTrigger works just fine. When I try to use the compiler to recreate what I've built in HTML using compiler elements, the gsap script stutters. I'm just trying to understand the difference here, so that I can use gsap in a production site. I simply don't want to handcode every site I want to use gsap on. I understand it's a "communication" issue between my wp theme and the script, but I'm not seeing *exactly* where the issue lies. I understand the CSS transitions in the screen you posted @OSUblake, but I'm not seeing any specific inherited transitions that would mess with the scripts. Here's the compiler using raw code (very rough bare version of the horizontal scroll). https://kristyleehanson.com/gsapforumtest/ TL;DR - I'm wondering where the problem lies between this raw html and the compiler elements - I haven't been able to hunt it down yet. I have a feeling once it's pointed out, it'll be a real forehead slap for me, but extra eyes and specified guidance would be amazing. Link to comment Share on other sites More sharing options...
OSUblake Posted January 21, 2022 Share Posted January 21, 2022 5 minutes ago, Kristy H said: I'm wondering what CSS transition folks are seeing that is bumping into my GSAP JS positioning - as in It's not seeing per se, it's that the properties you are animating with GSAP are conflicting with the CSS transition properties on those elements. Every time GSAP changes a value, the CSS transition is going to kick in and try to animate it too. It's creating two competing animations. I can't say how to fix it with as I don't mess with WP or any theme builders, but you need to figure out way to remove the CSS transitions from any elements you are animating with GSAP. That would probably be a better question to ask the theme builders. 1 Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted January 22, 2022 Solution Share Posted January 22, 2022 4 hours ago, OSUblake said: you need to figure out way to remove the CSS transitions from any elements you are animating with GSAP @Kristy H If you have control over your CSS or an overwrites file, just target the classes that are applying the transitions and add transition: none; 2 Link to comment Share on other sites More sharing options...
Kristy H Posted January 22, 2022 Author Share Posted January 22, 2022 @elegantseagulls - thanks for pushing me in the right direction! For future folks reading this - in this instance, that means I used: .section {transition: none;} and the scroll was smooth! 2 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