Hi ladies and gents.
Hoping someone can help me out with the performance of this animation in Safari. I built a site for a friend and it works fine on Chrome, Firefox and Edge but on Safari it flashes towards the end of one of the animations in the timeline. I have no idea why. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate it 😘 https://theswirlytrain.com
Here is a video example of what is happening.
// start animation at top of page
function scrollTop() {
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
window.scrollTo(0,0);
}
const tl = gsap.timeline({ defaults: { ease: 'power3.out' }, onStart: scrollTop });
tl.set('article', {autoAlpha: 1});
tl.from('.home .artwork .elementor-widget-container', 3, { scale: 8, autoAlpha: 0, delay: 0.3});
tl.from('.home .elementor-button, .signup-form, .release-details', 1, {autoAlpha: 0, y: 40, stagger: 0.4, delay: -1});
tl.from('header', 1, {autoAlpha: 0, delay:-0.5});
tl.from('.moving-text', 3, {autoAlpha: 0, scale:1.2, x: 100, delay:-0.5});