Animations works locally, not in production

[TheChris]

Hello,

 

A few months ago we've built a website with GSAP. The strange thing is, it just stopped working correctly. Animations will load when you resize the browser, ScrollSmoother stopped working whatever you do. When I view my project locally, everything works.. 

 

You can view the production version here; http://bitly.ws/BPNt

 

animation.js

// GSAP
import {gsap} from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';
import {ScrollSmoother} from 'gsap/ScrollSmoother';
import {SplitText} from 'gsap/SplitText';
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText);
 
// jQuery
jQuery(function() {
// ScrollSmoother
let smoother = ScrollSmoother.create({
smooth: 2,
effects: true
});
 
// Split Text
if(document.querySelector('.js-split-text')) {
var childSplit = new SplitText('.js-split-text', {
type: 'lines',
linesClass: 'inline-block'
});
var parentSplit = new SplitText('.js-split-text', {
type: 'lines',
linesClass: 'overflow-hidden'
});
 
gsap.set(childSplit.lines, {opacity: 0});
ScrollTrigger.batch(childSplit.lines, {
onEnter: batch => {
gsap.set(batch, {
opacity: 1,
yPercent: 100
});
gsap.to(batch, {
yPercent: 0,
duration: 1.5,
ease: 'power4',
stagger: 0.3
});
},
start: 'bottom 95%',
once: true
});
}
 
// Reveal Image
if(document.querySelector('.js-reveal-img')) {
let revealContainers = document.querySelectorAll('.js-reveal-img');
 
revealContainers.forEach((container) => {
let image = container.querySelector('img');
let tl = gsap.timeline({
scrollTrigger: {
trigger: container,
once: true
}
});
 
tl.set(container, { autoAlpha: 1 });
tl.from(container, 1.5, {
xPercent: -100,
ease: 'power2.inOut'
});
tl.from(image, 1.5, {
xPercent: 100,
scale: 1.3,
delay: -1.5,
ease: 'power2.inOut'
});
});
}
 
// Items Fade
if(document.querySelector('.js-items-fade')) {
$('.js-items-fade').each(function (index) {
let triggerElement = $(this);
 
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
start: '0% 100%',
end: '100% 0%',
}
});
tl.from('.js-items-fade .js-item', {
y: '2em',
opacity: 0,
stagger: .2,
duration: 1,
ease: 'power3.inOut',
delay: '.2'
}, 0);
});
}
});

 

Dependencies;

    "@alpinejs/collapse": "^3.10.2",
    "@barba/core": "^2.9.7",
    "@gsap/shockingly": "^3.10.4",
    "@roots/bud": "5.8.7",
    "@roots/bud-postcss": "^5.8.7",
    "@roots/bud-sass": "^5.8.7",
    "@roots/bud-tailwindcss": "5.8.7",
    "@roots/sage": "5.8.7",
    "@tailwindcss/typography": "^0.5.2",
    "alpinejs": "^3.10.2",
    "flickity": "^3.0.0",
    "gsap": "npm:@gsap/shockingly",
    "js-cookie": "^3.0.1"

Any help would be appreciated!

 

Thanks

[mvaneijgen]

I see what you mean. What I would do is enable the markers on the live site and see what they are doing.  (markers: true, on the ScrollTrigger object or the following code to enable makers for all ScrollTriggers)

 

ScrollTrigger.defaults({
  markers: true,
});

 

What I can gleam from your code and personally would never do with the .js-reveal-img

• You are animating the trigger element, ScrollTrigger uses this element to do all its calculations, so if you move it these calculations could be off.
• tl.from(container, 1.5, {}) this is old syntax (nothing major, but in the new syntax you define the duration in the object {duration: 1.5}
• I'm not sure if this is valid delay: -1.5, I would use the position parameter to have elements start at the same time. 
• start: '0% 100%', end: '100% 0%', this should work, I think. But I would try swapping it out for "top bottom" "bottom top"

Are there any errors you're getting? Anything else you could provide about the project to could help us help you debug? Using React, Vue.js? Maybe a screen recording from the live site vs the local site and/or a demo page with just one problematic animation that is not working, so that we can focus on one bug at a time. 

 

De site ziet er goed uit trouwens! 

[TheChris]

Hi,

 

Thanks for your comment! This was our first step in GSAP, so there is no doubt that things can be done better or differently.

I've uploaded two video clips, so you can see how it works locally and on production.

 

https://www.veed.io/view/611cefae-7a6c-4197-817c-aa27c56d786e

https://www.veed.io/view/2d517fce-e129-4845-a66a-b728437a76b3

 

In production you see that SmoothScroll no longer works, and the reveal of images or animations of the titles no longer work either. There are currently no error messages to see. We don't use Vue or React. It is also a fairly simple WordPress website (Sage) that we have polished with GSAP.

 

Thanks!

 

PS: Bedankt voor het compliment

 

 

[TheChris]

A small update. I just downloaded the database from production and then (locally) GSAP no longer works. When I disable the following WordPress plugin, GSAP works: 'Site Kit'; https://wordpress.org/plugins/google-site-kit/

 

The weird thing is that I don't have an error message in my console.

[mvaneijgen]

Are there settings in that plugin? Somethings that could cause issues is if Javascript gets minified, loading JS gets deferred, images get lazy loaded. 

[Rodrigo]

Hi,

 

Debugging wordpress sites is super difficult since we don't have access to the code and we can't play with it.

 

My main suspect is that wordpress updated itself and something might have broken that particular plugin and that is affecting not GSAP specifically but everything else. Can you try some console calls in your files that use GSAP in order to see if those get called?

 

Sorry that we can't be of more assistance here, to be honest I don't envy you right now, I haven't worked with wordpress in almost 7 years and it seems that not a lot has changed in that time , but I do remember running into inexplicable issues like this.

 

Happy Tweening!

[TheChris]

Thanks for your comment! With Google Site Kit you can link Google Analytics and Search Console. I think it's pretty innocent. The only thing I can think of is, you can also link Google Tag Manager, which could affect the performance of the website. But then I would have expected an error message or something.

 

Quote

My main suspect is that wordpress updated itself and something might have broken that particular plugin and that is affecting not GSAP specifically but everything else. Can you try some console calls in your files that use GSAP in order to see if those get called?

 

Do you have an example how I can do this?

 

Quote

Sorry that we can't be of more assistance here, to be honest I don't envy you right now, I haven't worked with wordpress in almost 7 years and it seems that not a lot has changed in that time , but I do remember running into inexplicable issues like this.

 

Not a problem, I'm happy with the help that I get. A lot has changed, some for better some for worse.

Thanks

[Rodrigo]

Hi,

 

So I assume that you have a .js file that creates the ScrollSmoother instance, just before the ScrollSmoother create method, put a console call there. If you have some other custom JS files, do the same there in order to see if the scripts are actually executed at some point. Is quite unusual for things to just stop working all of the sudden and get no console errors. There should be some sort of error related to keeping that plugin you mention. If everything works when removing that particular plugin, it's clear that the plugin is creating a problem and that should be in there, unless the problem is created on the PHP side of of things (server), then you should try some logs in your PHP.

 

Finally, just as a precaution be sure to use the same version of GSAP Core, ScrollTrigger and ScrollSmoother.

 

Happy Tweening!