Anya

Looks like the flickering issue goes away if I add "transform-style: preserve-3d" to all parents that have perspective set up, and adding overflow: hidden backface-visibility: hidden to elements that are being transformed. ?

Thanks Rodrigo for your input. The flickering occurs in Chrome 109.5414.119 both on Mac Ventura 13.1 and Monterey. 2 of my coworkers see the same flickering in Chrome on their Macs, but the other 2 don't have the issue on the same browser version and OS.... I tried a lot of tweaks, with backface visibility, rotation 0.01, force3D etc... no success See the video below for visibility. https://www.veed.io/view/afa1b20a-9b98-4c2c-b08b-60714335f7de?panel=share&sharingWidget=true

Hi guys, I'm having a weird flickering issue when using Smooth Scroller in conjunction with Scroll Trigger and translating elements in Z axis with multiple layers. (seen in Chrome 109 in full screen view). Disabling SmoothScroller makes it much better, but I love Smooth Scroller and would love to keep it enabled. Maybe you might have some input on how I could tackle it. To my understanding it's chrome being buggy with multiple translateZ.. but.. that's the browser most people use.. Any ideas are very appreciated! Thank you for your hard work. https://codepen.io/slyka85/full/xxJRmjd

my 2 cents again)) @Jean-Tilapin First thing is you need to write your rotation values as relative instead of absolute, for ex "+=180", instead of 180, which means it will always add 180 on top of the current value. Second, as i far as i know from the docs, if you want to repeat your timeline but keep the final values, you can invalidate the timeline and restart it on completion, this way it forgets the recorded values. As for the delay between restarts, not sure about the best approach, but you could create a dummy tween with empty object after your animation. For ex.: var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}}); for(var i=0; i<nbLines; i++) { test .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'+=180', ease: Circ.easeOut}, 0.1, 0) .to({}, 3, {}) }

@Jean-Tilapin just passing by here.. I think your issue is in the loop, you're targeting all "hexagon-inner" elements collection, instead of only those that belong to the "grid-line" that you're looping, and also the start position can be set to 0. This should work? test.staggerTo($(line).find(".hexagon-inner"), 0.5, {rotationY:'180'}, 0.2, 0);

oh wow! thank you so much, It took me some time to understand what was wrong with my timelines returned via functions. Everything works like a charm now! ".pause(0)" did the trick the way I needed to reset to initial states. Million thanks your way!

I'm making a game, where on different clicks, different animations are triggered that have nested timelines and tweens, and values that are being animated, for example "x, y, fill color, scale, velocity, gravity, bezier paths, autoAlpha, rotation etc" on different elements. When the game is over and to play the game again, I need to reset all those values to the initial ones so the user can play again. In 'clearTargetAnimations', I'm basically gathering all the targets from the functions that return timelines and nested timelines and clear all props on them. But with the inline transform, clearProps will remove those too, and I'm not sure what other method to use to basically reset elements styles to initial state.

Hi guys, I'm having an issue with restarting a master timeline with nested timelines and understanding to how properly clear props from elements. Basically, I have svg that uses symbols that have inline transforms on them applied when exporting from Illustrator. I'm animating x and y values. Then on btn click, I would like to completely restart and reset the animation and elements transform to initial values. The issue is that when I clear all props or just transform, it's removing the inline transform values that are coming from svg. But I would want to revert them back to initial state. Is there a way to achieve it? Hope my demo is helpful enough to show. Thank you!

Oh wow, @Sahil, this totally makes sense now, with the use of scrollTo to trigger the scrollMagic with the nested timelines. Thanks so much for your help!

Hi guys! I have a question about the way of synchronizing Draggable with Scrollmagic scene. Basically i need to repeat exact same scene I have on scroll, but make it happen on drag of the progress bar. And can't figure out the right way to do it... Especially if the user decided to scroll when the progress bar is halfway.. Any suggestions? I set up a simple pen to demonstrate. Thanks so much for your amazing work!

I just realized I can animate stop-opacity instead to make it work in Safari. But still curious about the rgba colors though

Hey guys. Another Safari issue here. This probably refers to svg gradients more than the actual Tweenmax, but in case someone had this issue before and knows a workaround? I'm trying to animate the stop-color of the gradient to create transparency effect, but in Safari the color is just white with no alpha, and sometimes it doesn't animate at all. I'm not quite sure what is happening.. Any input would help! Thanks a bunch.

Thank you guys, @OSUblake, you saved the day as usual translateZ fixed the clipping of the card in Safari. Btw, the Firefox version that I see the issue is the old Firefox51. In the newer versions this clipping does not happen.

Hey guys, I'm having some weird stacking order issues in Firefox and Safari, maybe someone can put me in the right direction towards fixing it. I have 2 cards to flip, that are inline-block, side by side and have the corners overlapped (on purpose). While they are rotating, one card gets behind the other one for a brief moment until it gets the correct order. This happens in Firefox. Chrome is fine. Also, I can see a different issue in Safari that appeared recently, where rotation is not even visible. This did work a couple months ago and still works in my production code, but not on Codepen now. The stacking issue in Firefox is what really matters to me right now. I tried setting z-indexes, but that didn't help, so I understand it's rendering issue? How can I go around it? Thank you!

@OSUblake, works like a charm. Thank you, Blake.

Hi guys! Hoping to get some help on the current issue. I have a flip card that rotates 180 deg on each click. And depending on what dot a user clicks, the corresponding image is being used for the face of the card. The issue I have is that if a user clicks before the previous tween animation finishes, the rotation value gets added and then card rotates a little more. I would like on each click for the card to make a complete 180 rotation and probably prevent clicks if the card is still animating. How would I go about this? I'm using relative values '+=180' because absolute values were not giving me the result and IE was not cooperating either, only with relative rotation value I got a full effect of a 3d card cross browsers compatible. I have also tried to check if(!tl.isActive()) {} but didn't seem to give me the correct boolean.. Any advice is appreciated! Thank you!

Thank you guys, both solutions helped!

Hi guys, I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s. Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off. I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you! const tl = new TimelineMax(); tl .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )