[Using ScrollSmoother on a WordPress site]

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

 

[ScrollSmoother divs seem to get separated a little bit.]

@grommas

 

So simple yet so effective! works perfect! 

 

Thnks man!

[ScrollSmoother divs seem to get separated a little bit.]

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!

 

See the Pen GRyQeZE by REDDSTONE (@REDDSTONE) on CodePen

[image to fullscreen animation glitchy on second time]

14 minutes ago, ZachSaucier said:

No, it doesn't. It clones the clicked element to the body. Quite different. 

Most likely whatever issues it's causing in your WordPress environment is because of some CSS that you have. Intrinsically WordPress is no different than non-WordPress: all the core technology and approach is the same. I'm sure if you made a minimal demo in your WordPress environment it'd perform the same way as that demo. Most likely you're wasting time coming up with your own approach when what you should be doing is debugging why the standard approach isn't working  

 

Trying to keep the element in the same position on scroll would be much easier with fixed positioning as the first demo that you included does. Using a clone prevents other elements from being moved around when that positioning is changed. Additionally we recommend including the duration in the vars parameter, recommend using .set() instead of a tween with zero duration. Also note that in your second pen, even if things were setup correctly, the close animation could be incorrect if any adjustments to the screen size or scrolling occurred. 

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.
 
 

[image to fullscreen animation glitchy on second time]

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

See the Pen yLyvavQ by yasirhaleem (@yasirhaleem) on 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...

See the Pen NWrejBV by REDDSTONE (@REDDSTONE) on CodePen

[Using gsap in a Worpress theme. (Divi)]

14 hours ago, Visual-Q said:

Now that we know what divi does it may point you in the right direction.

 

 

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. 

[Using gsap in a Worpress theme. (Divi)]

3 minutes ago, ZachSaucier said:

Sounds like something you should ask about in the Divi community or support  

 

Let us know if you have GSAP questions and we'll do our best to help!

 

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

[Using gsap in a Worpress theme. (Divi)]

1 minute ago, Ihatetomatoes said:

First of all the new GSAP3 syntax is this, there are some tweens using an old syntax.

 

gsap.to(".layer-1", {
  duration: 0.2,
  x: xMove,
  y: yMove
});

I looked at the code and there is a lot going on. 

 

When you say: The bottom left one, should start spinning when scroll.

 

Which plugin should make the image spin? Some build in DIVI code?

 

 

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. 

 

[Using gsap in a Worpress theme. (Divi)]

20 minutes ago, Ihatetomatoes said:

Hi, really hard to debug this blind, there is a lot of other scripts that load on the page.

 

What error are you getting the console if any? The issue could be the order in which your scripts are loading and how you are including them in DIVI.

 

Try the standard way of debugging javascript:

- add breakpoints to your code

- console log objects and elements

 

As you can understand this forum is dedicated to GSAP and not many people here have any experience with 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. 

 

[Using gsap in a Worpress theme. (Divi)]

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})

 

[Scroll animation almost smooth]

Quote

Didn't we all?  

True that!

 

Quote

Hopefully we do it in an encouraging way to build you up, not tear you down.

So far, this forum seems to really cool!

 

Quote

The only thing that I might have done differently in your code is using a .to() tween instead of .fromTo() since you're using the default values as the start values for several of your tweens. Using relative tweens is one of the tips in my article on animating efficiently which I recommend.

Awesome man! I've gotten so much cool stuff from CSS-tricks in the past years. I can add this one to that list! 

[Scroll animation almost smooth]

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 😀

[Scroll animation almost smooth]

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! 

See the Pen dyGNRyK by REDDSTONE (@REDDSTONE) on CodePen