[improve performance of slide animation]

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())

 

 

 

[scrambletext plugin length is different and thus causing re-paints]

20 hours ago, OSUblake said:

 

That's probably your best option.

 

The only way to really prevent that is to use a monospace font with the same amount of characters, but that wouldn't work for what your doing because the number of characters would differ, and there's a size difference between English and Korean characters.

 

Exactly what I thought (except for the monospace font, let's see if I can remember that). 

 

Alright, this it is  Thanks @OSUblake !

[scrambletext plugin length is different and thus causing re-paints]

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

 

 

 

 

See the Pen BOxNWN by flowen (@flowen) on CodePen

[timeline problem with splittext]

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!

[timeline problem with splittext]

That's exactly what I did in the codepen (double check please or otherwise use

See the Pen Eweqrx by flowen (@flowen) on CodePen

) 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.

[timeline problem with splittext]

36 minutes ago, Sahil said:

I am not sure if that is right way to do it, your timeline gets modified every time you open and close. And if spammed with clicks, your animation goes on for few repetitions. Here is quick and ugly demo, see if it helps. This way you don't have to split text every single time. Here is a introductory tutorial about timelines in case you haven't seen it.

 

Red box is to toggle it, you can also see that if you repeatedly open and close your animation starts behaving odd, this way you have control over entire thing and won't have to worry about same behavior.

 

See the Pen OxBbar by Sahil89 (@Sahil89) on CodePen

 

7

 

 

 

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  

 

 

[timeline problem with splittext]

2 minutes ago, Sahil said:

Can you share that demo? I was trying to solve your problem yesterday before you deleted the question. In that demo, you were using same timeline throughout the pen which was main problem as pointed out by Jack.

 

Well I will post a simple demo which should give you idea and you can further make into your desired effect.

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

[timeline problem with splittext]

2 minutes ago, Sahil said:

Well you don't have to define it inside click event, you can just define it globally and call it on click. In fact, you can use same timeline for play and reverse if your desired effect is like that, but depends on how you want to do it. You can also split text just once, and define timeline on next line which will do the animation. After that you can simply reuse those timelines for open and close.

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.

[timeline problem with splittext]

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?

[timeline problem with splittext]

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?

 

 

See the Pen Eweqrx?editors=0010 by flowen (@flowen) on CodePen