Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

wpsoul

BusinessGreen
  • Posts

    39
  • Joined

  • Last visited

About wpsoul

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

wpsoul's Achievements

  1. 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?
  2. 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
  3. Didn't help. Ok. I will create minimal demo to replicate totally the same situation. Need some time for this
  4. tried immediateRender - doesn't help. What do you mean about gsap.set? Do i need to set zero values for gsap.set?
  5. 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/
  6. 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
  7. 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?
  8. 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();
  9. 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
  10. 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?
  11. 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
  12. 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.
  13. 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}
  14. 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
  15. 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
×