Hi, I’m trying to implement GSAP animations into my web bubble application.
I want to target CSS classes that I add using the Classify plugin.
However, for some reason, GSAP cannot find and target these classes assigned by the plugin. I ran tests via the console, which returned a message saying that it couldn’t find the class. This is despite the fact that I can see it in the HTML structure in Elements.
(Both GSAP and scrolltrigger are loaded correctly, according to the console.)
Has anyone else encountered this issue?
I would appreciate any advice on how to use custom GSAP scripts functionally.
Thanks a lot!
You need to make sure your page is fully rendered, then have GSAP target your elements. Classify works in the headers, so it moves things around before the rest of your app usually.
I haven’t tested GSAP specifically, but the same method works unilaterally.
I tried various options.
Create a workflow event “when the page is fully loaded” to run JavaScript. It doesn’t work, it can’t find the class.
I tried adding a 10-second delay to JavaScript, but it still can’t find the class (the page loads in less than 1 second).
You should be loading the GSAP CDN via your page header first, then load the functions that is utilizing its dependency in the body of your page (your HTML/js that uses it).
— no delay is required if you load the dependency and functions at the correct times
