kitepwr

Nice Blake, I will implement this tonight and then consider this presentation app complete. Just 1 day ahead of my deadline. LOL There is much about it that is very, very crude. But other parts are pretty cool. GSAP has been a huge part of it. Many thanks to everyone at Greensock. Darrin

Yep, that works and is the kind of thing I was looking for. Thanks! But.... is there a way to accomplish that without the explicit reference (to #t1) in clearTL()? In my code, clearTL() can be called after any of 100 different page animations. Some will need a clearProps for specific (and varying) fields; others will not. The best I've come up with thus far is to use something like ... in run() --> tl.data = {clearProps: <array of elements>}; in clearTL() --> if (tl.data.clearProps) TweenList.set(tl.data.clearProps,{clearProps: "all"}); Is it ok to use .data like this? Is there another/better way to do this?

Hey guys, this one's got me stumped. I have a timeline that starts by making an element visible. When pause(0).clear() is run, the element is still visible. Why? And, how do I make it go back to it's previous state -- i.e. not visible? The codePen shows an example. Thanks, Darrin P.S. I'm breaking my own rule by asking 2 questions in 2 weeks in a forum. Apologies for that.

Thanks Blake... I had the same thought, but didn't have the time to test it out. Unfortunately I have to report that I still see the lines

Hey guys, just an update ... I was able to borrow a projector and it does NOT display any of the artifacts. Given my time crunch I'm going to gamble that the projector I end up using for the presentation will behave the same. With the differences between a projector lens and an LED monitor, I think I will be ok. So, for now, I'm going to table this issue as an interesting discussion worthy of more attention at some future date. Thanks for all the great feedback, was really appreciated. Darrin

Interesting Jonathan, given that I had the issue before I create the codepen I'd vote for it being a Chrome thing. Is there a way to identify the 'missing properties' so I can address that? I don't know when the next release of Chrome is, but my presentation is in 2 weeks

Awesome Blake, none of your 3 demos show any artifacts. I see they all use a canvas which I could change to using if needed. But then I'll have 2 different techniques in my presentation (there's a lot more to the full presentation than just this little bit ) which, if at all possible, I would rather not have. Does this new information suggest to you an approach (short of converting to canvas) I can use? While I see what you've done in the 3 demos, I'm afraid I don't know enough of the inner workings of this stuff to draw the same conclusions you can. Again, my thanks.

I've tried different variations of fixed, relative, and absolute positioning and not found a combination that eliminates the artifacts. Hopefully you can identify the CSS properties I need to apply and that will do the trick. Thanks in advance! Darrin P.S. My 'other idea' did not change anything. I realized I could reduce the background image from 5000x3750 to 1024x768 and hoped that would help with repainting. But it made no difference.

Thanks again everyone! I didn't really think it was a GSAP bug or anything, but my hope was that there might be a setting somewhere that I'd missed. And/or this community could give me a kick in the right direction. Jonathan, that's the kind of direction I was hoping for ... and dreading too. "Hoping" because it's a direction that might lead toward a solution and it helps to increase my knowledge. "Dreading" because I have a fair investment in positioning/moving 'absolute' elements inside a 'fixed' container. But, if I need to rework that library, that's what I'll do. I do have one other idea to test out, will do that tonight after work. The animation stuff is a side gig for a non-profit, so I only have the evenings to work on it.

P.S. Just tested on another machine that has the exact same hardware as my development box except it's only running 2 monitors. I see the artifacts on that system too.

Thanks all for looking into this. Sorry, I forgot to mention the environment stuff...: Windows 10 Chrome Version 61.0.3163.100 (Official Build) (64-bit) CPU: Intel i5-4690 Video Card: HIS R9 280 IceQ OC 3GB GDDR5 (i.e. AMD Radeon R9 200 Series) I'm running 3 monitors, 1 of them set to 1024x768 where I see the issues. I have, just now, tested on a few different machines. My other Windows 10 machine (a 5 year old high end Asus laptop) shows the artifacts, but less so then my development machine. This laptop *is* the machine I will run the presentation from at the convention, so that's my target environment. My Mac's (2 different MBP's) do not show the lines at all (ya Mac!). I won't have access to a projector until a few days before the presentation. So, I don't know if this will be visible or not. If there is not an obvious software/coding solution, I guess my next best step would be to find a projector and see if this is really going to be an issue or not. I've attached an image of what I see. I had to remove colors and reduce the quality of the image quite a bit to fit the image upload size restrictions so ignore the swirls and just note the vertical lines in the background image. Thanks a bunch! Darrin

First, thanks for GSAP, I'm having a blast with it! Second, an apology... you will probably need to reset your monitor to 1024x768 to see this issue. I'm doing a presentation that will be displayed via a projector that only does 1024x768, so that's what I'm stuck with. In the codepen you can see white vertical lines left behind as the images animate right and left. In higher resolutions, it's not noticeable, but in 1024x768 it certainly is. Any ideas on how I can make them go away? Thanks, Darrin