Javascript fails to execute upon the return to the slide

Aug 27, 2023

I have simple animation scripts on a slide that are applied to 20 objects. 

On Hover script

//Reference the object
var theObject1 = document.querySelectorAll("[data-acc-text='Materiality']");
//Animate in GSAP
gsap.to(theObject1, { scale: 1.05,  ease:"bounce.out" });

And return trigger script:

//Reference the object
var theObject1 = document.querySelectorAll("[data-acc-text='Materiality']");

//Animate in GSAP
gsap.to(theObject1, { scale: 1,  ease:"bounce.out" });

The first time the timeline starts on a slide, everything works fine. But when I return to the slide again, nothing works, and I see 1000s of errors in the dev console.  Objects' states are changing during the scene between the slides.

Warning messages

bootstrapper.min.js:29 GSAP target [object NodeList] not found. https://greensock.com
  f @ bootstrapper.min.js:29
  r @ bootstrapper.min.js:29
  r.to @ bootstrapper.min.js:29
  Script21 @ user.js:335
  ExecuteScript @ user.js:66
  exeJavaScript @ slides.min.js:2
  v @ bootstrapper.min.js:29
  p @ bootstrapper.min.js:29
  u @ bootstrapper.min.js:29
  s.trigger @ bootstrapper.min.js:29
  triggerAction @ slides.min.js:2
  xe @ bootstrapper.min.js:37
  Ii @ bootstrapper.min.js:37
  (anonymous) @ bootstrapper.min.js:37
  (anonymous) @ bootstrapper.min.js:37
  (anonymous) @ bootstrapper.min.js:37
  xe @ bootstrapper.min.js:37
  (anonymous) @ bootstrapper.min.js:37
  applyMethod @ bootstrapper.min.js:2
  executeAction @ slides.min.js:2
  executeActions @ slides.min.js:2
  (anonymous) @ slides.min.js:2
  forEach @ slides.min.js:2
  executeFilteredPlayerEvent @ slides.min.js:2
  xe @ bootstrapper.min.js:37
  e @ bootstrapper.min.js:37
  triggerEvent @ slides.min.js:2
  h @ slides.min.js:2

 

Error message:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at fr (bootstrapper.min.js:29:59575)
at lr (bootstrapper.min.js:29:58901)
at i.init (bootstrapper.min.js:29:65037)
at t (bootstrapper.min.js:29:32607)
at z (bootstrapper.min.js:29:4224)
at a.render (bootstrapper.min.js:29:35857)
at s.render (bootstrapper.min.js:29:24454)
at x (bootstrapper.min.js:29:1692)
at a.updateRoot (bootstrapper.min.js:29:29193)
at ze (bootstrapper.min.js:29:14840)

Can someone share any ideas about what is happening? 

Be the first to reply