Michael Grandorf
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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:- 1
GSAP animations runs slow in production
in GSAP
Posted
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!