Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ddi-web-team

Scroll Trigger not working properly in IE11

Recommended Posts

Posted (edited)

I'm having trouble getting the new Scroll Trigger plugin working in IE11. I can recreate the issue in a codepen. I provided the default URL, but to see the issue properly,  you'll need to look at debug view as that's the only view that works properly with IE11.

 

https://cdpn.io/DDI-Web-Team/debug/ef47361ba478799899683f07f3aaf0ae

 

If you look at the console in IE11 it says

 

Invalid property scrollTrigger set to .logo Missing plugin? gsap.registerPlugin()

 

But this isn't an issue in newer browsers. It seems like it does actually do the animation. But it does it on load.

 

Edit -  GSAP provided a fix below. I've updated the codepen to reflect the workaround. Leaving up the codepen for anyone that might stumble across it with a search engine query.

See the Pen ef47361ba478799899683f07f3aaf0ae?editors=1010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

Edited by ddi-web-team
Providing clarity on fix.
  • Thanks 1
Link to post
Share on other sites

Thanks for reporting this, @ddi-web-team. I found the problem. All other browsers implicitly have a "name" property on class objects, but not IE. We'll implement a fix in 3.3.1 but in the meantime you can fix it by simply adding the name BEFORE you register the plugin like this:

 

ScrollTrigger.name = "ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

Sorry about the hassle. 

 

And thanks for providing a reduced test case! Very helpful indeed.

  • Like 5
Link to post
Share on other sites

No hassle at all. I'm glad that I could help 😁

  • Thanks 1
Link to post
Share on other sites

EDIT: some environments won't let you do ScrollTrigger.name = "ScrollTrigger", so until we release 3.3.1 (probably in the next few days), do this right after you register the plugin instead: 

gsap.core.globals("ScrollTrigger", ScrollTrigger);

👍

  • Like 5
Link to post
Share on other sites
9 hours ago, GreenSock said:

EDIT: some environments won't let you do ScrollTrigger.name = "ScrollTrigger", so until we release 3.3.1 (probably in the next few days), do this right after you register the plugin instead: 


gsap.core.globals("ScrollTrigger", ScrollTrigger);

👍

 

This did it! thanks! will stay tuned for 3.3.1.

 

** Side note, running custom webpack build. It was working for me locally, including registerPlugin after gsap import. After i run a build, it was throwing same error ddi-web-team reported above and causing all to animate initially on load before scroll, for me in all browsers, not just IE.

 

Great work on the plugin guys!!! so stoked to do more with it!

  • Like 1
Link to post
Share on other sites

Chrome has the same problem. Your solution 

 

gsap.core.globals("ScrollTrigger", ScrollTrigger);

after 

gsap.registerPlugin(ScrollTrigger);

make everything works perfectly fine. Just lost few hours to find this solution. 

  • Like 1
Link to post
Share on other sites

Yeah, sorry about that - it won't be necessary at all once we push 3.3.1 out which should happen before the weekend. 👍

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×