Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by wpsoul

  1. wpsoul

    Wordpress x GSAP

    I want to add next set of tutorials for GSAP and Gutenberg editor
  2. App is fine, all other gsap animations are working. And I use context cleaning already. This app is for WordPress which has additional react functionality, I guess that problem is because text is inside Richtext editor, which also manipulates text. Unfortunately, I can't make any kind of demo so I can't see how you can help. It's not very critical in current point. I fount temporal fix. Instead of dealing with text, I just check if block has inner div and simply change textobject for something like textobj.querySelector('div') This works, but unfortunately, GSAP makes more lines. When I have 2 lines of text, it's making 4 lines and here I gave up. Better to keep previous logic when whole block is line, it's not so critical like wrong line break
  3. Maybe, I am wrong because I used "words" type before. I checked now and such problem is only when dividing by lines. Unfortunately, your solution doesn't work for me in React, it's breaking whole text and merging it, words and chars type totally destroyed . So, I will keep as is.
  4. Here you can see that first block of text are wrapped by additional container. Second block doesn't have this and it's working properly. In previous versions, both blocks worked properly
  5. @GreenSock Can I use beta version on production or it will have more changes in stable version?
  6. @GreenSock I can confirm that it's working properly for me. Do we need to use lazy parameter now on all staggers with .from?
  7. P.s2 It doesn't work now also on Incognito mode. For me, it looks like GSAP has some inner cache now and it doesn't work properly. Because this bug can be visible not on first load, but when you reload page several times
  8. P.s. It doesn't work also on Iphone. Also, sometimes it doesn't work properly on Firefox, but not so often like on Chrome
  9. MacOs - doesn't work in Chrome, Safari. Ok in Firefox and Opera This is what I see in chrome and safari https://monosnap.com/file/BfpoDXX4vnzcMuKiqN71w1ALRv3vln But it's fine in Incognito window. Now, I don't understand what is happening. Tried to clean cache also, it didn't help
  10. No, it doesn't work. Maybe it's OS related. On iphone (chrome and safari, it's working). But on MacBook I see next https://monosnap.com/file/LgcWC56fMmYULVZlH7UTehhHWjvtMC
  11. I continue to get a lot of issues with stagger in last update. I found that when I have several animations on page with ScrollTrigger + stagger + .from direction, then it works really bad. Sometimes it loads correctly, sometimes it doesn't hide element (even those which are not in first screen), sometimes animation is not finished. What was changed in last update for staggers? 3.10 version - hide element before animation, it's correct. 3.11 - sometimes it hides, sometimes it doesn't https://codepen.io/igor-sunz/pen/JjvRQrN https://codepen.io/igor-sunz/pen/yLjaMxv
  12. I understand situation if we have transform: translateX in css and we animate the same in GSAP, but it's not my situation. Not critical problem, but it's strange that it's worked early.
  13. I still think that it's bug in latest update Here the same codepen in 3.10 version https://codepen.io/igor-sunz/pen/PoePxPq It's working, stagger completes animation as it should. Why? Do you mean that all previous years it was wrong and now it's correct? How about situations when I need hover transform effect on animated blocks?
  14. I understand that css property can affect animation. It's not my problem. My problem is that stagger animation didn't finish even in fact that css has no any applied css transform properties, it has only transition easing. I updated my codepen, I included also another gsap.from but without stagger. As you see, problem is only on stagger block, blocks without stagger property has no problems in finishing animation.
  15. I don't apply css transitions for the same properties. I apply transition: all 0.4s (for example). And it's for applying hover transitions on the same block and this was working early. Does it mean that GSAP checks also hover state now? In css, only Box-shadow effect is applied on Hover. Does it mean that we can't add any css effects on the same block now? And why it's not working only on staggers?
  16. After some testing, I found that problem is in cases when element has css transition property. Why do this affect stagger? Previously it was not a problem.
  17. I think that there is bug in all stagger effects in latest update. I checked on previous version and it's fine As you see, only first element is animated (sometimes all animated but not finished and it has step effect). P.s better to edit on codepen to see what I mean
  18. Apple uses exactly technic of image sequence. I just recently did the same https://greenshiftwp.com/how-to-make-apple-style-pin-scroll-video-animation/ On DJI, they use two methods at once. When you start scroll, they show image sequence, when you reach some point, they show autoplayed video with event attached to scroll. You can do the same with Scroll trigger if you attach video animation to ScrollTrigger callbacks (for example onToggle callback) https://www.w3schools.com/tags/av_met_play.asp P.s. more frames per second you export as image sequence, more smooth and realistic will be animation, you just need to find proper interpolation between scroll and frame change.
  19. Thank you, this was helpful. For first try I resolved by wrapping all code with new gsap.context() function and attaching to global variable making it available for other scripts. But solution with getting Scrolltrigger is better because I don't need global variables. I confirm that it's working
  20. I am using timeline to add some pause in Horizontal scroll, but I need to find Tween instance of container automatically with getTweensOf function. Unfortunately it works only if I use tweens without timeline. As I inderstand, I need to get timeline instance first, then, search with getTweensOf inside timeline https://greensock.com/docs/v3/GSAP/Timeline/getTweensOf() But how can I get timelines objects on page which is attached to container? I tried to add id to timeline but this doesn't work
  21. I am sure that this is not possible in browser. Export video as image sequence instead https://codepen.io/GreenSock/pen/mdVEpKK
  22. I have a pleasure to test new Observer. It solves many needs and I want to build simple gallery with it. And relative gsap parameters are very helpful for such task. So, each swipe right, I add some relative value x:+=5. But now, I need to set limit of what is scrolled. So, I need to get current value before animation and check if it's not bigger then some value. Is using https://greensock.com/docs/v3/GSAP/gsap.getProperty() is correct way to do such tasks or there is some Observer utility?
  23. Yes, this is what I used before. Problem with this function is that it kills all ST on page and I need to kill only ST of specific containers. Advantage of killTweensOf is that it has option to specify container, this is why I asked if it's killing also ST.
  24. I want to remove all gsap.to, gsap.from and attached Scrolltriggers. Is killTweensOf enough to remove all of them?