wpsoul

I have backend integrated in system so I can't make demo. Users can change data of animation, so, when it's loaded - it's working but when they change data, for some reason, style tags simply removed and don't add again. But using afterend place style tags outside block and it's working It will be good to have parameter in Splittext to exclude some inner tags. <style> is not only the one which we may want to exclude from text animations. For example, I can have block with text and also table that is generated on fly. I want to add text animation to everything in block but except table

@GreenSock style tags are only in backend, because we need to add some conditional styles. Code is working for first animation but failed when I do update. I replaced appendChild to .insertAdjacentElement('afterend', style))); and I think it's working fine

I found weird behavior in Split Text. If content has style tags <div id="text"> Some text <style>.example{color:red}</style> </div> it also divided on chunks <div style='position:relative;display:inline-block;' class='gsap-g-word'><div style='position:relative;display:inline-block;' class='gsap-g-char'>.</div><div style='position:relative;display:inline-block;' class='gsap-g-char'>e</div><div style='position:relative;display:inline-block;' class='gsap-g-char'>x</div>... How to prevent it from touching style tags?

You are right, I didn't know that easing of previous animation also affects starting point of the next animation, when I changed to linear, it started in proper time

Checked the documentation but can't find answers. I want to create a vertical timeline when the line is animated and when it reaches a specific point, it triggers svg shape to scale on it. But I can't find any information on how to make proper relative timelines when I use a scrub. I see that the animation starts at different time when I set different duration of animations. so, my code is like let tl - gsap.timeline({scrollTrigger: {trigger: "#id", start: "top top", end: "+=100%"}}); tl.to("#id", {scaleY: 1, duration: 2}); tl.from("#id2", {scale: 0, duration: 1}, '<+=1'); I thought that the second animation should start when I reached the middle point of the first animation, but it's starting at 75%. So, how it's calculated?

@GreenSock for the first test - it's working. But I need to test on a real app now. Does it degrade performance?

So, there is no way to use Scrolltrigger for Iframes?

Tried to add additional layer inside iframe and attach scroller there - it doesn't work correctly, everything is moving together. I leave it as is now so you can test

yes, and that’s the main problem. When I try to use Iframe object as scroller, it’s completely broken, I don't see scroll markers at all in this case. Without providing scroller, it’s calculating parent window and again it’s broken. So, currently it’s not clear what to set in such scenario

Ok, i tried on all services and they can't have iframes. So, I made on my site. It's simple HTML page so you can copy it to local environment for testing Iframe control for Scrolltrigger See how markers are working for animated object. They are not moving when you scroll down, so I need somehow to keep scroller for block wrapper around Iframe, but still detect animated objects which are inside Iframe

I have the same problem as mentioned above - I can't make codepen demo because it doesn't allow to inject cross domain iframes So, I have possible two ways of solving. 1. Hard coding core GSAP files 2. Modifying trigger to use proper scroller Biggest problem is that my iframe is generated automatically in CMS and scripts are possible to add: 1. Outside and inside iframe. In this way GSAP goes crazy and is applying animations twice. Scrolltrigger added also twice, on inner iframe window and on parent window 2. Only outside iframe. In this way animations are correct but ScrollTrigger uses wrong position. I tried to use something like elementDocument.defaultView.frameElement elementDocument elementDocument.defaultView where elementDocument is getting from useRef.current.ownerDocument and then attach it to scroller property but it fails in proper detection of scroll position So, the question is - if GSAP scripts are loaded outside iframe and we use React to add animations to iframe, is it possible to dynamically assign proper scroller window to ScrollTrigger?

The same. I have iframe on page and ScrollTrigger doesn't work there properly, it always detects wrong positions

I want to add next set of tutorials for GSAP and Gutenberg editor

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

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.

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

@GreenSock Can I use beta version on production or it will have more changes in stable version?

@GreenSock It's working for me

@GreenSock I can confirm that it's working properly for me. Do we need to use lazy parameter now on all staggers with .from?

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

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

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

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

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

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.