wpsoul

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?

I can't tell exactly, but let newItems = htmlDoc.querySelectorAll(".card"); querySelectorAll is not live query. You should try getElementsByClassName if you have any kind of ajax or dynamic dom changes on page

Didn't help. Ok. I will create minimal demo to replicate totally the same situation. Need some time for this

tried immediateRender - doesn't help. What do you mean about gsap.set? Do i need to set zero values for gsap.set?

I think I made more located bug. Looks like scrub has perfomance drop when I have on the same screen non scrubbed animations with Scroll trigger. When I have on the same screen only scrubed animations - it's working smoothly. Especially, huge perfomance drop when batch or stagger animations are triggered in the same time Compare https://lookmetrix.com/test-scrubs and https://lookmetrix.com/test-scrub/

I created minimal demo but can't see too much jumping, just a bit https://codepen.io/igor-sunz/pen/zYKyaJj So, for me, it looks like perfomance issue, because difference in code between my page and minimal demo is only in number of items and DOM elements on page. Does scrub option perfomance is related on number of Scrolltrigger items on page? Where can i start to debug code to find issue? I tried to change end value, start value and other and still no success

I can't understand one strange issue. I use very simple scrub scrolling like let animation = gsap.timeline(); animation.from($anobj, {y: 100}); var scrollargs = {}; scrollargs.start = "top 92%"; scrollargs.scrub = 1; scrollargs.animation = animation; ScrollTrigger.create(scrollargs); But it's jumping when I first scroll, looks like perfomance issue. I read about common issues, my issue is not when initial loading, it's while scrolling. In the same time, if I remove scrub, it's working smoothly Example can be found here https://refashion.wpsoul.net/ Scroll slowly to second screen (BROWSE COLLECTION). Parallax images jumping a bit even on slow scroll (sometimes just a bit, sometimes on 15-20px). If I scroll up, down for some times, it becomes to work smoothly. What can be reason?

Ok. It's working, I changed demo. Not sure why it's not working on my production build. Maybe, some syntax error, will try to change. Anyway, is there any possibility to do this without trigger new batchscroll on new items? Something like on my first demo with ScrollTrigger.refresh();

Ok. It makes sense. But what if I don't know what will be in appended item? For example, sometimes, i will have just items, sometimes, i will have additional wrappers and containers, so, I need to find items in appended Container. I tried find() - but it doesn't work. I updated demo https://codepen.io/igor-sunz/pen/PoNbRPm

Ok. It's working, but I don't understand how it's working. In first init, you make createBatch(".card"); - it's clear, we add container class for batch but for appended item you use whole block createBatch(newContent) - so, how scrolltrigger know which element we want to use as item in fact that we send whole block of appended items as batchitem?

So, I am back to this question. I made demo, it's not the same as my situation but close to it. I have started elements with batch scroll. Then, I add new items via ajax (on demo it's via append on click). As you see, batch scroll doesn't work on new items so I need some simple way to refresh batch scroll. I tried also to duplicate scroll function inside append. But it makes another problem - it makes all items to retrigger. I tried to add scroll trigger only on appended items, but didn't find solution for this First demo https://codepen.io/igor-sunz/pen/gOrLveP Second demo with scrolltrigger for only appended items https://codepen.io/igor-sunz/pen/PoNbRPm

I can feed new items, but all things in application is optional. I can't just add them to code, it should be conditional and depending on admin settings. Currently, minimal demo is not possible, because ajax is generated via core wordpress functions and GSAP options are generated dynamically via wordpress app. But thank you for trying.

I don't use start and end options, they are default. In initial animation options I have only {y:15, autoAlpha:0} In batch options I have {y:0, autoAlpha:1}

Ok. I implemented it on the same link https://recash.wpsoul.net/ Here you can see, then it's working on load. But when you scroll down and reach ajax point, you will see that it doesn't applied to new items I can't post full code because GSAP is integrated into wordpress application but here is piece of code which triggers batch gsap.set($batchobj, batchinit); scrollargs.onEnter = batch => gsap.to(batch, batchenter); scrollargs.onLeave = batch => gsap.to(batch, batchleave); scrollargs.onEnterBack = batch => gsap.to(batch, batchenterback); scrollargs.onLeaveBack = batch => gsap.to(batch, batchleaveback); ScrollTrigger.batch($batchobj, scrollargs); ScrollTrigger.addEventListener("refreshInit", () => gsap.set($batchobj,batchinit)); inside $batchobj I have jquery element var $batchobj = $(this).closest('.elementor-widget').find('.col_item'); In batchinit - I have merged object from options of my app. it's nothing special, just regular GSAP object of options Now, here is start of ajax $.ajax({ type: "POST", url: translation.ajax_url, data: data, success: function(response){ if (response !== 'fail') { activecontainer.html($(response).hide().fadeIn(1000)); So, ajax takes elements from wordpress and add it to container via simple .html() function What I want is some easy way (the best for me will be not touch ajax function) to add batch scroll to new items also. But I think that there are no easy ways for this

here is simple example https://recash.wpsoul.net/ Scroll down page, you will see that all items are loading via ajax. What I want - I need to add batch scroll similar to your demo (simple shift by y axis and opacity), but I don't have possibility to change ajax on site. So, the best for me - will be to have such code which can work separatelly from scripts of site. As I understand correctly, I can do this only if I kill batch scroller each ajax iteration and create it again inside ajax call function

Yes, but all of them require to dive inside ajax scripts, which can be very diffucult if I use ready app or page. What I want to have is some refresh function, which can refresh existing trigger, not kill, but just refresh (update scroll trigger items). Please, note, I use batch scroller and it's not regular scrolltrigger as I undestand, so, I am not sure if all methods are working for it https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

Ok. But I think that I can't delete all scrilltriggers, I need to delete just for product loop. In current point I will add scroll trigger to ajax function, but i hope it will be some utility in future, because the most common task for batch scroller is different kind of infinity scrolling

Ok. What if I want to make some common task. For example, I have infinite loading. So, elements are existed on page, scroll trigger is working as expected. Now, when user scroll down, new elements are added via regular .html() jquery and ajax . https://monosnap.com/file/NUgJMKb2PIWiY2fwm9PZIHzfMvLi0R Is there any method or event which can be used to refresh Scrolltrigger and add new items to it?

Currently, I am trying to use new Batch Trigger. It works well on page load, but doesn't see elements which were added via ajax. I tried to use something like $.ajax({blablabla, success: function(response){blablabla, ScrollTrigger.refresh(); } but doesn't work. Are any other possible ways?

yes, looks like it checks this and it's reason why it has no issues with image height. Anyway, solution was found. Now, I am testing perfomance on some real pages. And looks like it's no big difference in perfomance between SM and ST. In some points, ST is faster, in some points, SM. But, ScrollTrigger has more options, easy for understaning, much more flexible and has less size. So, definetelly, will move to ST for all future projects

Ok. Thank you. Found also solution special for lazysize script document.addEventListener('lazyloaded', function(e){ ScrollTrigger.refresh(); }); Looks like it's working Can you explain why there is no problem with waypoints and Scrollmagic. Does it mean that Scrolltrigger is calculating images more early than Lazysize script?

Didn't know about this, thank you. But as I understand, this reduce perfomance a lot, because you trigger function for each image on page, page can have hundreds images if it's magazine site. Is any function which is called only once in the end?

it's already added in demo https://codepen.io/igor-sunz/pen/NWxaONx

No, it doesn't work. I added width parameter. There is no problem when I know image size, I can set their width. But user generated sites don't work in such scenario. I don't know real image size which will be uploaded, also, Wordpress generates different sizes for each resolution and images are resized via css. I repeat, problem is only when height parameter in css is set as auto (and this scenario is on ALL sites with responsive images) and final resizing is made by css. Scrolltrigger uses parameters from image settings and not from final rendering in browser. I need function which recalculate positions. refresh and update() don't work.

tested. Didn't help. I placed the same image in src and for lazy load. Now, scrolltrigger gives me wrong position which is above real position of element (previously it was under). So, it's not reason. I think I need function to reflow position after page is loaded. Something which is working when window resized. ScrollTrigger.refresh() and ScrollTrigger.update() don't work