autoAlpha and opacity setting initial tween values in a fromTo, but not transitioning

[Calsa]

I am having trouble reproducing this in a codepen, so this will be for general advice to help narrow possibility. 

 

I have two fromTo that set opacity of divs

        gsap.fromTo("#nk_title_" + nurkleID, { autoAlpha:0 }, {autoAlpha:1, duration:0.5, delay:1.85}); // title

        gsap.fromTo("#nurkle_desc_" + nurkleID, { autoAlpha:0 }, {autoAlpha:1, duration:0.5, delay:1.85}); // description

 

NurkleID is being fed by a for loop. The first nurkleID will fire fine and its fromTo normally. But any additional nurkleID's will only set their from value, but then not transition toward the "to". Oddly, there is no console error and there are many other animations and animations along with these two within that loop structure that have no issue doing fromTo. So the loop does complete each cycle. 

 

What sort of things should I be looking for that may cause this, the rest of this animation set behaves exactly like it should.

 

Sorry, I know its frustrating not being able to reproduce it in a codepen so I will keep trying....

You can see it here https://dern.tech/?n=30. Just wait a few seconds for everything to load, I have not got around to a loading screen yet. The one white text label over GeneXpert fully transitions, but all other labels fail to ever appear.  Chromes inspector does show them setting opacity to 0, so they fire the "from" part of a fromTo. They just don't then start the transition. 
 

[PointC]

It's tough to say without a demo and looking at a live site is a bit much to debug.

 

Here's a really basic loop using a few divs that should mimic your setup.

See the Pen vYyZVXR by PointC (@PointC) on CodePen

 

 

[Calsa]

31 minutes ago, PointC said:

It's tough to say without a demo and looking at a live site is a bit much to debug.

 

Here's a really basic loop using a few divs that should mimic your setup.

 

 

 

 

Yeah, I get its a massive pain to debug given no codepen. I almost did not post as its a near impossible task to help, and I did not want to come off as too much of a noob.   

 

Still, its strange that the initial values set -so divs are found and opacity is set to zero by GS -  then the tween just does not fire. I figured maybe someone saw this before. 

[GreenSock]

Yeah, pretty tough to diagnose on a live site like that, and certainly beyond the scope of the free help we can offer in these forums but my guess is that maybe you've got another tween overwriting that one? Totally guessing here. I'd be curious to put an onUpdate: () => console.log("update") on it and see if the tween is actually running. 

 

Also, I'm just curious - did you try changing autoAlpha to opacity? I doubt that'll do anything - just grasping at straws here. 

[akapowl]

 

Aside from a couple of errors, you have quite a few GSAP warnings in the console along those lines:

 

GSAP target .nk_title_text89 not found.

GSAP target .nk_desc_text89 not found.

 

Not sure if this might be related to your tweens mentioned above, but it looks like in the code on your page you might not be addressing the elements correctly - looks like you are addressing classes instead of IDs and also before the number of the item you are missing a underscore.

 

 

Edit:

 

Yup, this is what you have in your code (nurkle.ts lines 515 & 516):

 

        gsap.fromTo(".nk_title_text" + nurkleID, { autoAlpha:0 }, {autoAlpha:1, duration:0.5, delay:1.85}); // title
        gsap.fromTo(".nk_desc_text" + nurkleID, { autoAlpha:0 }, {autoAlpha:1, duration:0.5, delay:1.85}); // description

 

 

[Calsa]

14 hours ago, GreenSock said:

 I'd be curious to put an onUpdate: () => console.log("update") on it and see if the tween is actually running. 

Firing GreenSock fromTo for: #nk_title_1 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_4 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_5 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_89 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_28 . Opacity Changing to: 0.9933
nurkle
//Next Tick
Firing GreenSock fromTo for: #nk_title_1 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_4 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_5 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_89 . Opacity Changing to: 0
nurkle.ts:516 Firing GreenSock fromTo for: #nk_title_28 . Opacity Changing to: 0.9966

 Console reports they are completing their tween, firing every frame as they should. They just don't update their opacity value.

 

I left in the debug  so the live console reports on the dev domain show this happening. One element is indeed transitioning, the others are found, initial value is set by GS to 0 opacity, but they then just don't transition.

 

It's odd, as if I remove elements from the list of callouts, its always only the last that successfully transitions, all others stay frozen at 0 opacity even though they are set in the from part of the fromTo. 

Question: Is there a way to see, or even manually step through a global timeline to see what is being executed across all timelines tick by tick? This is more of a general question for future debugging.  I don't set opacity in CSS or through GS opacity on anything else up the DOM tree. Clearly I am doing something dumb here as there is not much way to bork up the fromTo. So just looking for ways to better debug on my own under the hood of GS. 

 

Quote

Also, I'm just curious - did you try changing autoAlpha to opacity? I doubt that'll do anything - just grasping at straws here. 

Yeah I get that, I am grasping at this point too. As this should be a very simple thing.  And yes, I actually started out with opacity before discovering GS had an autoAlpha which is your equivalent to fadeIn() fadeOut() in jquery - which btw does work. I was trying to migrate all animations to GS as the DrawSVG was a component I needed but did not want to build myself and I did not want a mix of frameworks controlling animations, though at this point somewhat regretting that decision  

 

Quote

Edit:

 

Yup, this is what you have in your code (nurkle.ts lines 515 & 516):

Ah, I left that in by accident when I went to bed, I was checking on something and wanted to see what would come out with a bad ID was given to GS, Sorry for the confusion, this is a dev domain not production so I regularly break things when playing.  This whole project was driven by me not touching Web Development in about a decade since I headed off overseas to do humanitarian engineering work. I never really did professionally web dev before that, but always liked to dabble. Now that I am back in the western world, and locked down like everyone else, I decided to explore what the state of modern web has become by building something fun. Now I remember why I never wanted to do it professionally  

 

OK so other things I tried

I removed all other GS animations to make sure they did not conflict... no change

I can verify without GS visibility is full on (so we do fire the initial from part of a fromTo autoAlpha which sets all elements to Opacity:0)

I can make any one object transition by making sure its the last element through the for loop that triggers these animations - so they *can* all work.

I can verify the tween fires its update for every frame, but new values are never set. You can now see this yourself in the live console logs. 
I can verify if I feed a class to the elements, that class transitions as expected - but can't go this route as some elements will eventually be hidden when not in use, but not there yet

I can do an utter hack to verify it can be updated within a GS tick by  doing

 gsap.fromTo("nk_title_" + nurkleID, {autoAlpha:0}, {autoAlpha:1, duration:0.5, delay:1.85, onUpdate:() => { 

                console.log("Firing GreenSock fromTo for: #nk_title_" + nurkleID + " . Opacity Changing to: " + document.getElementById( "nk_title_" + nurkleID)!.style.opacity) 

                let ele = document.getElementById("nk_title_" + nurkleID);

                let opac = ele.style.opacity

                ele.setAttribute('style', 'opacity:' + (opac + 0.1));

            }

How is that for a hack to test things 😛

 

 

IDK, it is a weird issue. But I admit hard to troubleshoot as there are only so many fail points in GS and we hit the basics. Though it still feels like is is GS as Jquery .fadeIn() works in the same loop and I can manually force value in plain JavaScript, using the hack above. 

Anyway, I spent too much time on this seemingly little issue, so I'm going to give it a rest for now unless anyone has any bright ideas. Thanks for trying folks.

[GreenSock]

It sounds like a logic issue in your loop or something. Super difficult for us to troubleshoot on a live site, though - is there ANY chance you could provide a minimal demo, perhaps in CodePen? I'm sure that'd allow us to identify the issue. Something smells very suspicious and I'm curious.