Jump to content
Search Community

Scrolltrigger doesn't work properly in Wordpress Gutenberg Editor

wpsoul test
Moderator Tag

Recommended Posts

Currently, I am building plugin for Wordpress with GSAP, where users can add animations in simple interface without code knowledge. And everything is working great on frontend, but not in editor.

 

After some research, I found that wordpress uses very complex layout for editor with sticky full height block

 

.interface-interface-skeleton {
    display: flex;
    flex-direction: row;
    height: auto;
    max-height: 100%;
    position: fixed;
    top: 46px;
    right: 0;
    bottom: 0;
}

And there are some other sticky blocks for sidebar. 

 

So, Scrolltrigger doesn't detect object position properly (especially if it's below first screen, then, it makes scroll trigger at most bottom part). But if i resize page or trigger Scrolltrigger.refresh, position is detected properly.

 

Is any option to enable scrolltrigger for sticky 100% height blocks?

Link to comment
Share on other sites

ScrollTrigger can work with sticky elements, although the CSS you're showing has position: fixed, which will still work with ScrollTrigger. Regardless, it's very hard to say what's going on, especially since you stated that this was for the editor, so maybe the editor is messing stuff up. I would just go with the .refresh option since you know that works.

Link to comment
Share on other sites

  • 2 weeks later...
On 12/1/2021 at 6:42 PM, OSUblake said:

ScrollTrigger can work with sticky elements, although the CSS you're showing has position: fixed, which will still work with ScrollTrigger. Regardless, it's very hard to say what's going on, especially since you stated that this was for the editor, so maybe the editor is messing stuff up. I would just go with the .refresh option since you know that works.

 

Unfortunately, I need get back to this question. Scrolltrigger.refresh is detecting proper position of items which are on screen, but when I start to scroll, everything is messed up again.

 

I tried to replicate the same structure of containers like in Wordpress but for demo of plugin. And yes, it's also not working properly. Only first element which is on screen while loading has proper behaviour. I took official demo as base of Scrolltrigger and wrapped it with containers like in Wordpress editor

 

See the Pen qBPRQpm by igor-sunz (@igor-sunz) on CodePen

Link to comment
Share on other sites

I didn't have time to look in-depth, but I think the issue is that you've got ".interface-interface-skeleton" (which contains all your stuff) set up as position: fixed. So of course that's not allowing anything to actually scroll. I'm not quite sure what you expected to happen. I'd suggest not putting your content into a position: fixed element if you want to trigger things on scroll :) 

Link to comment
Share on other sites

10 minutes ago, GreenSock said:

I didn't have time to look in-depth, but I think the issue is that you've got ".interface-interface-skeleton" (which contains all your stuff) set up as position: fixed. So of course that's not allowing anything to actually scroll. I'm not quite sure what you expected to happen. I'd suggest not putting your content into a position: fixed element if you want to trigger things on scroll :) 

 

As I mentioned in my initial message, this plugin is for Wordpress Editor (which is used on 60% of sites in internet) and we can't control structure of editor layers and styles of skeleton. Currently I just need to know if there is any possible way to make it works or 100% no chance. 

Link to comment
Share on other sites

You're going to have to figure out which element is the scroller and add that to your ScrollTrigger. I don't know if this is the correct one, but you should be able to figure it out in your environment. And whatever that scroller is, you need to make sure you set overflow-y: scroll.

 

ScrollTrigger.create({
      scroller: ".cInnerContent",
      trigger: elem,
      markers: true,
      onEnter: function() { animateFrom(elem) }, 
      onEnterBack: function() { animateFrom(elem, -1) },
      onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
    });

 

  • Like 1
Link to comment
Share on other sites

It's helped on codepen but not in wordpress editor which has too complex panels with several scrollable fixed zones and injected items. This hack makes scrolltrigger detecting correct position, but animation and scroll is going crazy. So, I give up in this, maybe I will try in future again

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.
×
×
  • Create New...