[Split Text coverts style tags]

3 hours ago, GreenSock said:

I read that a few times but I still don't understand what you mean. Can you provide a minimal demo that illustrates the problem? 

 

Hm, that also sounds odd to me. Why would appendChild() fail? Again, a demo that illustrates the problem would be super duper amazingly helpful. 🙂

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

[Split Text coverts style tags]

@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

[Split Text coverts style tags]

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? 

[Relative timeline and scrub]

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

[Relative timeline and scrub]

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?

 

[ScrollTrigger in iFrames]

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

[ScrollTrigger in iFrames]

On 8/14/2023 at 10:00 AM, GreenSock said:

I don't have much time at the moment, but from a cursory glance the issue is that you set the scroller incorrectly.

 

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

[ScrollTrigger in 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

[ScrollTrigger in iFrames]

8 hours ago, GreenSock said:

So you're telling ScrollTrigger to watch one scrollbar, but using an entirely different one to actually scroll things. 

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 

[ScrollTrigger in iFrames]

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

[ScrollTrigger in iFrames]

On 8/11/2023 at 9:33 AM, GreenSock said:

@wpsoul we're not aware of any issues with ScrollTrigger having wrong positions in an iframe; please provide a minimal demo 

 

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?

 

[ScrollTrigger in iFrames]

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

[SplitText doesn't work properly on inner items]

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 

[SplitText doesn't work properly on inner items]

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.

[SplitText doesn't work properly on inner items]

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

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

[Stagger with .from and opacity is broken in last gsap update]

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

[Stagger with .from and opacity is broken in last gsap update]

@GreenSock It's working for me

[Stagger with .from and opacity is broken in last gsap update]

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

[Stagger with .from and opacity is broken in last gsap update]

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

[Stagger with .from and opacity is broken in last gsap update]

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

[Stagger with .from and opacity is broken in last gsap update]

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

[Stagger with .from and opacity is broken in last gsap update]

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

[Stagger with .from and opacity is broken in last gsap update]

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

 

 

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

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

[Stagger is broken on latest update]

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.

[Stagger is broken on latest update]

I still think that it's bug in latest update

 

Here the same codepen in 3.10 version

 

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

 

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?