GSAP animations runs slow in production

[Michael Grandorf]

Hi all

 

I created a prototype some time ago. It has many GSAP animations. I want to focus on the animations that appears when you scroll. For instance the shortcut icons.

 

If you compare my prototype with the production site you'll see that the animations are running slower on the production site.

Prototype:

http://yousee.grandorf.dk/homepage/homepage-clean.html

 

Production site:
https://yousee.dk/

The code is the exact same:
 

import inView from 'in-view';
import { TimelineLite, TweenLite } from 'gsap';

export function heroAnimation() {
  inView('.hero--animated').once('enter', () => {
    const items = ['.hero__title', '.hero__lead', '.hero__action', '.hero__legal-text'];
    const tl = new TimelineLite({delay: .4});
    tl.staggerTo(items, 1, {opacity: 1, y: 0, ease: window.Power2.easeOut}, .15)
      .to('.hero__brand-logo-image', 2, {opacity: 1, ease: window.Power2.easeOut});
  });
}

export function shortcutAnimation() {
  inView('.gsap-shortcuts').on('enter', el => {
    const items = el.querySelectorAll('.ys-shortcut');
    const tl = new TimelineLite({delay: .25});
    tl.staggerTo(items, .3, {opacity: 1, scale: 1, ease: window.Back.easeOut}, .15);
  });
}

export function mediaboxAnimation() {
  inView('.media-box--animated').on('enter', el => {
    TweenLite.to(el, 1, {opacity: 1, y: 0, ease: window.Power2.easeOut});
  });
}

export function mediacardAnimation() {
  inView('.gsap-media-card').on('enter', el => {
    const items = el.querySelectorAll('.media-card--animated');
    const tl = new TimelineLite({delay: .5});
    tl.staggerTo(items, .5, {opacity: 1, y: 0, ease: window.Power2.easeOut}, .2);
  });
}

 

 

What can cause this issue? Any ideas or help will be appreciated a lot.

 

Thanks

If you focus on the icons staggering in - you should be able to see the difference:

 

[ZachSaucier]

Hey Michael and welcome to the forums! Good work on your site.

 

That is an interesting issue. I noticed that you used different selectors in the dev and production build. I also noticed that you seemed to be animating the .ys-shortcut class in production and that class is applied to both the li and the a of each of those items (and both the li and the a were being animated). So I used my dev tools to remove the .ys-shortcut class from the a and it seems to be working without the increased delay. 

 

So I'd recommend removing that class from the anchor and using some other method (like .ys-shortcut > a) to color the anchor text.

 

Happy tweening.

[Michael Grandorf]

You are absolutely right. The production site has some small markup differences from the prototype. I'll fix that. 

 

Thanks a lot for your help Zach!