Sunflair

I decided to just overlay a div to the object and animate that instead of using the pseudo element. Thank you for all your help

I have loaded them in the React program. I did what I thought to load them in codepen, but it didn't work. Even the simple JSX didn't work. I put the lll there to see if it would show in the demo window, and that didn't even show. Like I said, it works until I try the CSS rule. I loaded it on my program and did the syntax according to what the documentation said. I searched the internet for the error message, but that didn't help much. Sorry.

everything worked fine until I tried to add the CSS rule Take out the ship:after and all works great

I am building a codepen and I am not sure how to add React as a factor. Is there something in the documentation I am missing how to do this? EDIT: This is what I have. Nothing shows up, so I am not sure I did the React part correct. The error message I get is:

Thank you! Reading this article helped with a similar question, and reminded me of the basics of defining opacity through out the tl.

I had to augment the codepen to mimic what happens in my program. gameEnd() does not repeat, it is one function that I listed twice in the codepen because I didn't want to make it recursive here. The game goes through, and gets to gameEnd(), then runs. The button is pushed and you go to the beginning of the game and play the whole thing and get to gameEnd again. At that point, finalSBPrint2 is called again. It's still running from the first time it is called and when called the second, (and third, and fourth) time, those fades overlap and it gets to look really sloppy. I tried to make .time and .date opacity 0 in the game restart(), but that does not work. Tried changing it in Javascript style and attribute, but that does not work, either. I even tried keyframes, but it will not act on those classes once gsap prints them. I like your fix, and will try to incorporate some of the things here in my next attempt. It's spaghetti code, I know. I am just learning and when I learn something new, I try to change it, but it's a lot and a big file, so I don't want to post the whole thing. If you want to look, it is in github. I am Sunflair0, and this is cash-grab. Master branch for now. I say that so you can see in context, but really, I just need a way to turn off the fade, or stop it mid-fade when I get out of this function, and let it re-start when it needs to be called again. When I put in stops or pauses, or resets, they are called right away instead of waiting, so it never runs properly the first time. I will keep trying until I get it!

I am so sorry to bother you further, but this solution kills my animation before it can be used. I tried to put the kill event on a button, but it kills it before it starts (I read the question and answer in the forum, but that is from 5 years ago, and I could not make the solution work). Is there a way to reference the .finalSPPrint2 outside of the function that originally calls it? Will it be out of scope if I try to call it in another function? If not, would hoisting wreck it anyway? I also tried pause instead of kill. Same result. It stops .finalSPPrint2 from working.

Thank you! I had not heard of kill, and it sounds like that is the ticket. Also, thank you about the event listener. I had an issue with the button and had to remove and create and all that mess, and finally figured it out but forgot to move this. I will do that! If I need more help, I will ask for it. Thank you for being patient with me. I am still new to coding and think Greensock is super cool.

If this isn't showing the effect well enough, I can supply a video. In the program, the duration of the fade is much smoother, not sure why it is different here. But, if you push the button several times, you can see it starts looking stilted. In the program, the effect is magnified.

https://codepen.io/sunflair0/pen/bGaooox Here is the codepen. If you push the button once, you can see the effect, push it a lot, and you can see it better. In the program it is not so subtle. You can see the two divs stepping on each other. And, on load, the second time the divs are already present instead of starting opacity at 0.

I understand and will do that. I gave the pic so you can see the end But, tomorrow I shall make something. I will re-use the same codepen. Muchas gracias

I really appreciate your follow up. I am struggling with this program and this is literally the LAST thing I need to figure out. What I told you before, I figured out 2/3 of the problem (your previous help helped me a lot! It is all about placement with code lol). What I think I need now is how to invalidate this: let fadeDuration = 1, stayDuration = 3, finalSBPrint2 = gsap.timeline({repeat: -1}); finalSBPrint2.to(".time", {opacity: 0, duration: fadeDuration}, stayDuration) .to(".date", {opacity: 1, duration: fadeDuration}, "-=100%") .to(".time", {opacity: 1, duration: fadeDuration}, "+=" + stayDuration) .to(".date", {opacity: 0, duration: fadeDuration}, "-=100%"); This is how it looks for context (just for info flow so you can see): let finalSBPrint = gsap.timeline() finalSBPrint .to(".roundModal", { opacity: 0, duration: .5, ease: "circ", }) .to(".roundModal", { y: '-300%' }) .to(".tsModal", { opacity: 1, duration: 1.3, y: "165%", ease: "bounce", }, "-=.5") .to(".scoreCap", { opacity: 1, duration: 1.5, ease: "circ" }) // /////top part of scoreboard --player score .to(".quarter0", { opacity: 0, duration: .5, ease: "circ"}) .fromTo(".pScore0",{ opacity: 0, scale: 0}, { opacity: 1, scale: 1, y:"-9", duration: .6, ease: "circ"},"<") .to(".quarter1", { opacity: 0, duration: .5, ease: "circ"}) .fromTo(".pScore1", { opacity: 0, scale: 0, y: "-50" },{ opacity: 1, scale: 1, y:"-10", duration: .6, ease: "circ" },"<") .to(".quarter2", { opacity: 0, duration: .5, ease: "circ"}) .fromTo(".pScore2", { opacity: 0, scale: 0, y: "-50" },{ opacity: 1, scale: 1, y:"-10", duration: .6, ease: "circ" },"<") .to(".quarter3", { opacity: 0, duration: .5, ease: "circ"}) .fromTo(".pScore3", { opacity: 0, scale: 0, y: "-50" },{ opacity: 1, scale: 1, y:"-10", duration: .6, ease: "circ" },"<") .to(".quarter4", { opacity: 0, duration: .5, ease: "circ"}) .fromTo(".pScore4",{ opacity: 0, scale: 0, y: "-50" }, { opacity: 1, scale: 1, y:"-10", duration: .6, ease: "circ" },"<") .to(".quarter5", { opacity: 0, duration: .5, ease: "circ"}) .fromTo(".pScore5", { opacity: 0, scale: 0, y: "-50"},{ opacity: 1, scale: 1, y:"-10", duration: .6, ease: "circ" },"<") // /////bottom part of scoreboard --top ten .fromTo(".scoreModal", { opacity: 0 }, { opacity: 1, duration: 1, ease: "circ" }, "+=.5") .fromTo(".rank", { opacity: 0 }, { opacity: 1, duration: 2, ease: "circ", stagger: .4 }) .fromTo(".lvColor", { opacity: 0 }, { opacity: 1, duration: 2, ease: "circ", stagger: .4 }, "<") .fromTo(".score", { opacity: 0 }, { opacity: 1, duration: 2, ease: "circ", stagger: .4 }, "<") .fromTo(".name", { opacity: 0 }, { opacity: 1, duration: 2, ease: "circ", stagger: .4 }, "<") .fromTo(".time", { opacity: 0 }, { opacity: 1, duration: 2, ease: "circ", stagger: .4 }, "<") .fromTo("#message", { opacity: 0, scale: 0, x: "20%", y: "33%" }, { opacity: 1, scale: 1.1, ease: "power2", duration: 1 }, "-=1") .fromTo("#restart-button", { opacity: 0, }, { opacity: 1, x: "650%", duration: 1, ease: "back", rotation: 720 }, "-=1"); let fadeDuration = 1, stayDuration = 3, finalSBPrint2 = gsap.timeline({repeat: -1}); finalSBPrint2.to(".time", {opacity: 0, duration: fadeDuration}, stayDuration) .to(".date", {opacity: 1, duration: fadeDuration}, "-=100%") .to(".time", {opacity: 1, duration: fadeDuration}, "+=" + stayDuration) .to(".date", {opacity: 0, duration: fadeDuration}, "-=100%"); let master = gsap.timeline(); master .add(finalSBPrint) .add(finalSBPrint2); The problem is just the .time and .date targets. If I restart() it, it will run twice. If I clearProps, it just washes the color out of the targets, and the fade overlap persists. I watched the video several times about invalidate and I think this may be the answer. The fade alternates, and keeps running through the game. I think it is because of the finalSBPrint2 = gsap.timeline({repeat: -1}) The -1 (I think) is the problem. How do I stop that? That's why I think invalidate is the answer. The codepen is hard because you have to go through the whole game twice to get the effect because the first time it works well. The second time it is already running, and it prints over it so it looks a mess. If you need more, please let me know. Again, I appreciate all your help and suggestions. If you think that pause will work after all I say to you, then let me know. I will be trying it until I hear back from you.

I did try clearProps and it makes it r7n again immediately. I want to understand where gsap puts the elements in the DOM because this will not be the only time running into this. I watched the video about invalidate, but that was not the right answer, either. How do you get it to reset as the last tween without it wanting to rerun?

I also have this question, but slightly different. I have a game that has several levels, and information displayed at the end. The scoreboard elements that have had a gsap animation (some of them, not all of them) seem to be in the last state that they were in before the game resets. I have a button that resets the game, but I would also like to include a clearProps() to this button so this modal is blank whenever it is reused. How would I do that? I am just unclear on the syntax. I did put a clearProps in my timeline, but that just makes the modal re-run immediately. I don't want it to do that. If it was an etch-a-sketch, I want to just shake the screen so next time I am there, it is brand new again. I will make a codepen if you need, but the game has to go through a reset and you have to play it twice to see what I am talking about. https://codepen.io/sunflair0/pen/abVVgNx This is the worst pen ever. Sorry. on second pass, the scoreCap/quarter[n] does not appear. pScore[n] comes in as it should. on the scoreModal, the time/date is already there, and goes out of phase with the new manifestation of the modal. the button does a slide in with rotation first time, second time it just appears in it's end place. The other gsap targets perform consistently well.

So, update if you want to know, I ended up changing the positioning in HTML so that wasn't an issue anymore. I learned that if I am going to do a codepen, to include the parts that I don't think are important. The gsap was a part of a larger one, and I ended up making two timelines then combining them at the bottom for a master one and that did the trick. I am writing this in case I become a time traveler in the past and need to find out what solution finally worked for me