Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Johanna

Timeline.set not firing every time in IE11

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've been having some more issues with IE11. I've created a test animation to see how this plugin works with WordPress and to see what kind of functionality I can get out of it. I've made a simple animation to test this, seen in the codepen and at the link here http://dev.on-trac.co.uk/wp/safe-work-packs-svg-test/

 

I've managed to get the animation working, as well as well having it trigger once it is scrolled to. I've had to make some changes in places for this to be compatible with WordPress also. This works in all other browsers.

 

The issue I'm having is the code on lines 3 & 4 of the Codepen aren't firing every time the page loads on IE11. The rest of the script still runs, just not those lines. It will also SOMETIMES work as it should which is even more confusing. This means the animation doesn't look as it should as I can't set the start.

I'm not wanting the start point to fire at the same time as the animation, as this is triggered whenever the page is scrolled, which would constantly reset the animation. I'm only wanting it to run once when scrolled to.

 

If anyone has any suggestions on a better way to do this or what I may be doing wrong that would be very helpful.

 

Thanks

See the Pen oybaXp by CodesaurusRex (@CodesaurusRex) on CodePen

Link to comment
Share on other sites

I just tested this in IE11 and didn't see any problems. The set() seemed fine to me. If you want to experiment a bit, you could always remove the sets and use fromTo() tweens to see if you see any difference in IE11.

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

16 hours ago, PointC said:

I just tested this in IE11 and didn't see any problems. The set() seemed fine to me. If you want to experiment a bit, you could always remove the sets and use fromTo() tweens to see if you see any difference in IE11.

 

Happy tweening.

:)

 

It works perfectly in the Codepen but on my site it doesn't fire every time for some reason. I can't figure out why.

 

Because of the way I've set up the function to trigger on scroll, the function is fired every time the user scrolls, so if I used fromTo() it would reset the animation each time the page is scrolled. This is why I've set it up with a start point seperate from the animation itself.

Link to comment
Share on other sites

Hello @Johanna and welcome to the GreenSock forums!

 

Try a comma separated string instead of an array for the selector target parameter, How does that help?

 

TweenLite.set("#desktopTick, .desktopFormContent, #desktopSignature, #leftJump, #rightJump, .tabletDing, .smartphoneDing", {drawSVG:0});
TweenLite.set(["#tabletFormContent, #smartphoneFormContent"], {opacity:0});

 

And see if that helps IE11 evil :)

  • Like 2
Link to comment
Share on other sites

42 minutes ago, Jonathan said:

Hello @Johanna and welcome to the GreenSock forums!

 

Try a comma separated string instead of an array for the selector target parameter, How does that help?

 


TweenLite.set("#desktopTick, .desktopFormContent, #desktopSignature, #leftJump, #rightJump, .tabletDing, .smartphoneDing", {drawSVG:0});
TweenLite.set(["#tabletFormContent, #smartphoneFormContent"], {opacity:0});

 

And see if that helps IE11 evil :)

Thanks for the tip but unfortunately that didn't work :-(

 

It seems there's an issue with the main window.onload function possibly. I changed it so that some variables were assigned within that main function ( say line 2) but these came out as undefined.

Link to comment
Share on other sites

Try the below.. window.onload has always been buggy in IE
 

window.addEventListener("load", function(){

    // code goes here

}, false);

 

  • Like 5
Link to comment
Share on other sites

As @Jonathan said, you should use .addEventListener(). But I would say that you should do that for everything. When you directly set an event handler, there can only be one. If there was some other code that was listening for load or scroll events, you just removed those listeners. 

 

// Only allows 1 event handler
window.onload = function() {};
window.onscroll = function() {};

// Allows multiple event handlers
window.addEventListener("load", function() {});
window.addEventListener("scroll", function() {});

 

 

  • Like 6
Link to comment
Share on other sites

Thanks for the tips!

 

I've replaced both window.onload and window.onscroll with event listeners and I still have the same problem. ?

 

Thank you for your help so far! Hopefully I can get this sorted.

Link to comment
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.
×