Problem with Internet Explorer

[alpiz]

Hi everyone. First of all congratulation to gsap for this amazing project. I want to try to build a website that can also be visited on IE. The problem is that, when I use on Safari or Chrome it all works great. When I open on Internet Explorer console tells me "Invalid property scrollBehavior set to auto Missing plugin? gsap.registerPlugin()" and "Invalid property end set to 500 Missing plugin? gsap.registerPlugin()".
Thanks everybody for helping me

See the Pen VwKKOWE by al-piz (@al-piz) on CodePen

[GreenSock]

Welcome to the forums, @alpiz!

1. The "invalid property scrollBehavior" can be ignored - it's just a warning. We've added some code to the next release that should resolve that. But again, it's not breaking anything. It's just that IE doesn't recognize that property but ScrollTrigger sets it for browsers that do. 
2. The "invalid property end..." is because you're literally trying to animate an "end" property in your tweens but there's no such thing. I wonder if you were intending to set the "end" property of a scrollTrigger or something? I'm not quite sure what your intent was, but you certainly shouldn't be animating an "end" property on elements. 

   // what are you trying to do with this "end" property? (invalid)
   tl1.to(".section_1", {scale:0.5, end: "+=500"}, 0);

    

 

[PointC]

I have nothing to add to the answer. I just stopped by because the title of the thread caught my eye.

 

Seems like an evergreen statement for anyone in our business: "Problem with Internet Explorer" 🙄

[ZachSaucier]

18 minutes ago, PointC said:

Seems like an evergreen statement for anyone in our business: "Problem with Internet Explorer" 🙄

It's one I'm hearing less and less often. A surprising amount of people that I know have dropped IE support or at the very least worry about it less.

 

Safari seems like the new IE.

[alpiz]

Thanks for replying. I understand that I made an error inserting "end" property. 

What I tried to do was delay, of same pixel, an animation of the same timeline (for example animate ".section_1_01" after 500px of scroll from the ending of ".section_1" animation). In which way I can do it?

To return to the subject of the internet explorer, my problem is that the website on IE have extra spaces and different position of other browsers and I don't know why.
Probably the best solution is just like you said, drop IE support.

[ZachSaucier]

12 minutes ago, alpiz said:

What I tried to do was delay, of same pixel, an animation of the same timeline (for example animate ".section_1_01" after 500px of scroll from the ending of ".section_1" animation). In which way I can do it?

Sorry, I don't understand what you're trying to do. Perhaps a diagram would be a better way of explaining it? Or perhaps if you've seen the effect that you're going for on another website you could share that website with us?

[GreenSock]

Yeah, I don't really understand what your goal is there, but if you're trying to have one animation start a certain number of pixels (scroll-wise) past when the pinned one starts, you could use a function-based start, like: 

See the Pen 27c35bb7c2cfb1a0a6ea261c17815365?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps nudge you in the right direction. 

 

As for the different spacing in IE, my guess is that's related to you using markup/CSS that's not compatible. For example, it looks like your using Flexbox but I think that's pretty buggy in IE. Same for vw/vh units, calc(), filters, etc. 

 

I'd recommend being very careful about using box-shadow and filters because those are notoriously CPU-intensive. It's better to use a regular PNG with transparency. 

 

Happy tweening!