jasonduquain

Thank you both. Regardless of if any of that fixes it I know I am using some poor coding practices (not DRY, using left/position insead of transforms) that need fixing. Let me update a few things based on both of your suggestions and also dig a bit more into the flame chart in dev tools..

I have attempted to recreate an ad I found online. The animation is pretty close to it but I need to tweak some timings and change out the images, especially the maltese falcon thing. But I needed a quick free transparent image as a placeholder. I am not sure if anyone can help as this is more of a performance issue. Also it may be difficult to recreate butI have tested on 2 different connections and it also happens locally. I think the best way to describe it using a short video screenshot I took: https://res.cloudinary.com/jduquain/video/upload/v1580740725/videos/perf.mp4 Right at the 2800ms mark you can see the triangle and the statue come in a bit then they are stuck for 200 or so milliseconds before moving again. And the animation is set to start right after page load. I have spent a good bit of time trying to figure it out but have no idea. I have gotten better with the performance panel in devtools but I just don't see anyting obvious. Please know that I completely understand if nobody can help with this. This may have nothing to do with GSAP and also is not a functionality issue so no worries if not. But if anyone sees anything obvious based on the code or has any suggestions please let me know.

Very nice! Thank you for the quick help and making the code much cleaner! I will update the code in my current project and make sure to add this to my gsap notes for future reference.

Hello,I have a basic animation for 3 items. It is from a section of a site I am building so I cleaned it up just to show the essentials. The 3 sections all animate once they are in the viewport. It is working but I really feel like there might be an easier way to set this up with less code. If this is the best option then I will go with it. But if anyone sees anything that can be improved (either with less code and/or better performance) please let me know. Also a huge thanks to the posts in this thread: https://greensock.com/forums/topic/20831-svg-tweenmax-and-intersection-observerI was having problems getting the animation's basic functionality working and used the ideas in this thread to get it working.Thanks in advance for any assistance with improving this animation.

Thank you for the quick reply and the help! That really helps me understand they the R and the E values animate correctly as opposed to not at all or a double animation. And thanks for pointing out the position of the duration value. Yes Carl's course is really helpful for me. I am always glad when there is an update to the course to help me further my gsap knowledge.

Hello, Based on Carl's youtube video titled 'GSAP3 Advanced Staggers with Ease-based Distribution of Start Times', I have created a pen using splitText similar to his examples. But I am trying to animate two of the characters differently then the rest. In the text 'BEFORE FACES', I want the 'R' and the 'E' in the word 'BEFORE' to tween differently then the rest. So all the characters will go from an opacity of 0 and a 'y' of -150. But the characters 'R' and 'E' will have different x values at the start. From the video I see you can use the 'from' stagger property with values such as 'center', 'edges', etc and this is really nice. But I am wondering what is the best practice if a few of the characters need something different then the rest? In my pen I spliced out the 'R' and the 'E' characters and tweened those first then did my stagger for the remaining characters. I also looked into something similar just using forEach and no staggers but its the same concept. Is there a better way? This works but I am not sure if it is the best way to go. Plus by splicing those 2 values out of the array I am not sure why those 2 values are even animating correctly since they are not part of the array. If you look at the commented out console.log: 'console.log(div.chars5);' it returns an error: 'div is not defined'. But in the tweens I am clearly using div.chars5. I am guessing it has something to do with the split variable containing the entire array pre-splice..but then I would expect a double animation of the 'R' and 'E' characters if so. If someone can explain that I would appreciate it. Please let me know if you have any questions at all. Thanks in advance for any help.