flowen

hi guys, I created a checkout that slides in from the side of the page. It all makes sense if you go to https://www.shinbyeong.com/ scroll down a bit and click on 'pre-order' on the bottom. So the first time you open the slider it's a bit chucky, then after performing more times it get's better. I guess that's some cache right there. I added a will-change: transform; on the elements affected. But I didn't see any improvements. When I use chrome dev tools to record the performance I'm not sure how to analyse it. I don't see large chunks of delayed properties (in ms). My question: Can I pre-cache this animation somehow? What else can I do to improve it? Here is the code, quite simple is my guess: .viewport--locked adds overflow hidden on outer element. .animate-out transitions some transforms on translateX. Nothing special, except that I fire 2 with a delay and try to create a parallax like effect. const showModal = () => { viewport.classList.add('viewport--locked') TweenLite.to(viewportOverlay, .5, { opacity: 1, onComplete: () => { checkoutContainer.classList.add('animate-out') TweenLite.to(checkout, .5, { xPercent: -100, ease: Power4.easeOut }) } }) } const closeModal = () => { checkoutContainer.classList.remove('animate-out') TweenLite.to(checkout, .45, { xPercent: 100, ease: Power4.easeIn, onComplete: () => { TweenLite.to(viewportOverlay, .25, { opacity: 0, onComplete: () => viewport.classList.remove('viewport--locked') }) } }) } buyButton.addEventListener('click', () => showModal()) checkoutClose.addEventListener('click', () => closeModal())

Exactly what I thought (except for the monospace font, let's see if I can remember that). Alright, this it is Thanks @OSUblake !

hey guys, Using scramble text to translate Korean text to english text. The size of the characters are different -> paragraphs get shorter -> causes the page change height -> and thus causing reflows/repaints and more unwanted behaviour. You can see this happening live on shinbyeong.com Anyone has a clue how to fix this? I could measure all heights and set them inline (+ on resize events). I wonder if there's maybe a more elegant solution.. thanks :) * happy greensock supporter

oh my bad, I misread/misunderstood. I had to add a manual .restart() because after playing once, progress() didn't reset to 0. I also had to turn around the declarations of both animations. If I declare menuOut as last, the fromTo stagger will initially set .nav--project with opacity: 1. now it works correctly, thanks for teaching me!

That's exactly what I did in the codepen (double check please or otherwise use this link) and the problem still occurs. After closing the menu for the first time, it's hard to see the next splitText work in the next time you open the window.

Thanks for replying Sahil. Difference between your and my animation is that I have and want a different out animation. So .reverse() is not an option. UX wise I want my out animation to be faster than the introduction, so I adjust the timeline for that. I hadn't tried the spammy clicks, makes sense to test like that. Is there an option in GSAP to prevent an animation from running twice? Guess that adds a new question/challenge

ah,sorry about that I remember I answered my own question in the other thread. I updated the codepen, with 2 global variables as timelines: tlMenuIn and tlMenuOut

I tested this and thats why I edited my previous post. If I define 2 global timelines for the menuIn and menuOut animations, they still have the same problem Jack described.

ahhh understood! I didn't know/understand it worked like this, thanks for educating me! The only change to your code I want to propose would be to define 2 timelines for both animations at the top. Defining the timeline within the click event probably creates a new variable every time you press it. I assume this probably uses unnecessary extra memory. Saying this, I wonder if the animateCharsIn and Out also cause this problem. Perhaps it's all negligible? edit: Aha, after testing my own assumption I noticed I'm getting the same behaviour if I just use one variable. I guess the question remains if the memory used for this is negligible. If I use this effect all over the website (titles, body content, etc) over and over again. Wouldn't that cause memory problems?

hi! In the code pen you see an animation for the menu. I use the splittext plugin as you can see. First time you open the menu, everything animates as intended. But after closing once, the second time it seems like it's ignoring the timeline. Been fiddling with it for a long time but can't seem to figure it out. Anyone has a hunch of what's going wrong?