Reinoud

Hi Gsap'ers! I bought the Shockingly Green about a week ago, because of the ScrollSmoother plugin. The sites scroll like a dream now, it's awesome! The company I work for makes WordPress sites with the Divi theme and I had to make the ScrollSmoother work so we can apply it on all our new sites. If I just add the ScrollSmoother.create({}), the smooth wrapper will wrap very strange in WordPress, so I tried several way's to wrap it correclty, with no real results yet. Here's my problem: The problem is best visibile in Safari. Safari always takes a while to load the page fully. When you load the page en start scrolling right away, you'll notice that when the page is finally done loading, the triggers replace and scrolling becomes very buggy for a few seconds. After that a brown (probably the background-color of the page) bar appears at the top, and when scrolling down the footer won't appear every time. You can get this problem in chrome as well, but you have to start scrolling before the page loads. Does somebody know a wat to solve this? I tried: normalizeScroll: true ScrollTrigger.normalizeScroll() I added a "console.log("right here!")" so you can look up my code easily. Here's the link (it's a test site): Power | Tobias REDDSTONE

@grommas So simple yet so effective! works perfect! Thnks man!

Hi everyone! I've been looking for a good way to make my websites scroll smoothly, and I'm very happy that Gsap made this possible! I added the scrollsmoother to my page and it scrolls very smoothly indeed. Only I noticed that when mij body background is white and de backgrounds of some sections that are stacked on top of each other are black (or just a different color then the body), the sections seem to be sepperated a little by the smoothscroll, creating a border like white line. I added a CodePen to demonstrate. When is was making the Pen, and tested if I got the same white line, i noticed it doesn't show on my MacBook, only on my desktop on all browsers. So it might have something to do with te Framerate of my monitors. I really hope it doesn't cause I have to assume my website visitors use even worse monitors than I do. Hope someone out there can help me out!

Thnks! You're absolutely right, I've been wasting a lot of time. I made this one a while ago but never finished it. I figured that I based it on some existing one back then, but now I think I made it from scratch to get the hang of Gsap, did not work 🙃. The Wordpress theme we use can be a pain, they add a lot of CSS by default with "!important", which can make it very hard to override. Thank you for all the tips. I'll try remember on my coming projects.

Hi Gsappers! Been a while since I could resume working with Gsap. Been looking forward to making cool things with it. I'm just a bit stuck now. I made an animation that gives a row full-height and width, along with an image (as background) when you click a button, I thought it would be a cool way make popup. The first time it works fine, but when you click the button a second or third time everything starts to go very glitchy. I think in may have something to with me adding the timline and not removing it fromt he "master", I tried a few things but with no succes... I've been looking around on this forum and found a few topics with the same problem, most of the answers point to this codepen, But this one clones the body, this creates a whole number of other problems when working in Wordpress... Can someone help me out? It's the last step to finishing this animation, at least I hope it is...

Thank you for your research. And again sorry for the confusion. The designer kept working on the page, so he changed the images and their position. Nonetheless, thank you for your research. I hope I can find a way to work around the Divi animations, but it seems like that's going to be pretty difficult. The web-designers prefers to keep being able to use the Divi animations, but I think it's much easier to just extend the GSAP animation.

You're very right, but if you've ever asked Divi for help, you'll know you have a better change off making a racoon understand quantum physics, than getting a helpful answer. So I was hoping by some miracle someone here could point me in the right direction

Okay, thnks I'll change it. I'm new to GSAP so I never know if it's old code or just syntax I haven't seen before. And sorry for being vague: Of the first three images you see, the bottom right(!) one should spin when you scroll. This is a build in "scroll-effect" from Divi.

Hi, thank you for answering! I knew from the start when asking this it was a long shot. The page I added isn't the one with the problems, I don't know why I only added the page with the animation... This is the page with the problem https://zuidkantutrecht.nl/ (password = zuidkant) You'll see 3 images straight away. The bottom left one, should start spinning when scroll (this won't be the final animation, but it was the most obvious for testing). I didn't get console errors, I really wished I did, that way I could've tried some solutions myself. And it's the Divi animation that's not working. So there's no changing the code in that part.

Hi everyone! (I can't make a codepen 'cause the problem is in Wordpress). I've been using GSAP a lot lately and it has made our websites a lot cooler! My employer uses the Wordpress theme Divi (https://www.elegantthemes.com/), this way we have a web designer that can make a website quickly and whenever Divi lacks something the designer wants, I come in and make it work within Divi. So lately I've been adding a lot of GSAP animations and they work perfectly, But I've stumbled upon a problem. The Divi theme itself also offers some scroll effects, like fading in and out or rotating or scaling and so on. I had made this animation https://code.reddstone.nl/hover-effecten/hover-in-mijn-broekje/ and it works pretty well, but now that we added it to a website we're building that also uses Divi's scroll effects, those scroll effects stopped working. I think Divi also uses GSAP or something very simular and my timeline is stopping Divi's from working. How can I make sure there's no conflict between the animations? I know it's not much to go on, but I hope someone can help me with it. Here's my code. let tl = gsap.timeline(); var image = $(".image-div"); window.addEventListener("mousemove", moveImages); function moveImages(e) { var xMove = e.clientX / 35; var yMove = e.clientY / 35; TweenLite.to(".layer-1", 0.2, { x: xMove, y: yMove }); TweenLite.to(".layer-2", 0.8, { x: xMove, y: yMove }); } gsap.set(".layer-1", {autoAlpha: 0, scale: 2}); gsap.set(".layer-2", {autoAlpha: 0, scale: 2}); tl.to(".layer-1", {duration: 2.5, autoAlpha: 1, scale:1}) tl.to(".layer-2", {duration: 2, autoAlpha: 1, scale: 1, delay: -1.5})

True that! So far, this forum seems to really cool! Awesome man! I've gotten so much cool stuff from CSS-tricks in the past years. I can add this one to that list!

Thank you Zach, I'll give it a try. wasn't really scared. I don't post all that much on forums, and I learned to program by myself, so most of the time I feel like I'm probably doing it all wrong, but if it works I'm happy! Just when I show my code to pro's like you, I always feel like I'm going to get all kinds of comments on how my code looks terrible 😐. Luckily I couldn't all that much wrong with this code 😀

Hi Guys, First Time using this forum, and I'm scared.... I made a simple scroll animation, still took me a while since I'm still learning and trying a lot of different ways. I was just wondering what the best way is to make this animation run smoothly. Right now the text is going from y: -100 to y: 100, but since I'm starting with opacity: 0 and wanting to end there as well, I made two fromtTo()'s. But (i thought) to make it run naturally one ends at y:0 and the next one starts at y:0. this makes it stop for a second. What's the best way to just make the text go from y: -100 to y: 100 in one smooth motion? Thanks a bunch!