NeoDahl Posted June 16, 2020 Share Posted June 16, 2020 Hi! I'm a biggest fan of gsap. First of all, I'm not good at English(because I'm native Korean). so please understand my language. return to the subject, I have a problem in my project with ScrollTrigger. I have to make a website that is good to cross-browsing. but scrollTrigger is not working in IE11... Is it not appropriate at build for ie11 ? please check this link in ie11 ... I want to use ScrollTrigger to my project. plz help me!! Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 16, 2020 Share Posted June 16, 2020 Hey NeoDahl, welcome to the GreenSock forums! ScrollTrigger works great in IE11. The ScrollTrigger page had a CSS issue that made the content super wide in IE11 but we fixed that now so the page should work. Are you running into a particular error? 1 Link to comment Share on other sites More sharing options...
NeoDahl Posted June 16, 2020 Author Share Posted June 16, 2020 It is honor to meet you, Jach!!! Could you tel me how did you fix it?? I have a same problem with my project... maybe I think ' ScrollTrigger.create({blar~ blar})' is make issue.... (It just my opinion... ) I use gsap v3.3.3 and ScrollTrigger v3.3.3 before the my js code. I don't have an idea... // 'use strict'; ScrollTrigger.name = "ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); /* Main Page Animation */ (function() { // Top of Main var section01after = CSSRulePlugin.getRule('.main_section01::after'); var mainLoadTL = gsap.timeline(); var sec01BgFadeoutTL = gsap.timeline(); var sec01BgFadeInTL = gsap.timeline(); mainLoadTL .from(section01after, {duration: 5, top:'-40px'}) .from('.main_section01 .bottom_bg', {duration: 3, opacity:0, delay:1}, '0') .addLabel('label1', '.5') .from('h1 span', {stagger: 0.15, duration: 1, opacity:0, y:10}, 'label1') .from('h1+.tit_desc', {duration: 1, opacity:0, y:10}, 'label1+=1.3') .from('h1+.tit_desc .em', {duration: .7, opacity:0, x:5}, 'label1+=2') .from('h1+.tit_desc .em span > span', {duration: 1.5, opacity:0}, 'label1+=2.5') ; sec01BgFadeoutTL .pause() .to(section01after, {duration: 1, top:'-100px', opacity: 0}) ; sec01BgFadeInTL .pause() .to(section01after, {duration: 1, top: 0, opacity: 1}) ; // section01 pin control ScrollTrigger.create({ markers: true, trigger: '.main_section01', pin: true, // pinSpacing: false, start: '1 top', // end:'+=50', onEnter: () => { document.querySelector('.main_section01').classList.remove('deactivated'); sec01BgFadeoutTL.restart(); }, onLeaveBack: () => { document.querySelector('.main_section01').classList.add('deactivated'); // mainLoadTL.restart(); sec01BgFadeInTL.restart(); } }); })(); Link to comment Share on other sites More sharing options...
Joseph Levin Posted June 17, 2020 Share Posted June 17, 2020 I'm having a similar issue. See: UVClean placeholder site In IE11, something is definitely off. I've tested in Windows 7 and Windows 10 for desktop Firefox, Opera, Chrome, IE Edge, IE Edge Chromium and for mobile iOS Safari, Chrome, Firefox, and Android Chrome, and everything just works. I'm pretty new to GSAP and ScrollTrigger in particular, so please bear with me as my code, which shows some simple animations is, I'm sure, not that great: //begin GSAP //only provide animations for browsers that are not ie11 due to ie11 bug if (!html.hasClass('ie11')) { //register GSAP plugins that have been enqueued via functions.php gsap.registerPlugin(EasePack, SplitText, ScrollTrigger); //define GSAP intro timelines var tl0 = gsap.timeline(); //video text var tl1 = gsap.timeline(); //mask var tl2 = gsap.timeline(); //social var tl3 = gsap.timeline(); //washing var tl4 = gsap.timeline(); //notEffective var tl5 = gsap.timeline(); //ultraviolet //main intro ids var videoIntro = $('section#video'); var mask = $('section#mask'); var social = $('section#social-distancing'); var washing = $('section#handwashing'); var notEffective = $('section#not-effective'); //begin intro video text timeline var introWords = videoIntro.find('#tag1'); var mySplitText = new SplitText(introWords, {type:'words, words'}); var numWords = mySplitText.words.length; var animTimeTextFade = 2; //duration of text fade; var animTimeInitial = 0.5; //initial animation time var speedFactorTextFade = .375; //lower equals faster var tDelay = 5; //delay time before entire timeline animates, seconds var fadeDur = 0.15; //fade in time duration for uvWords container, seconds //begin ultraviolet timeline tl0 .addLabel("begin") //fade in introWords container .to(introWords, 0, {opacity:1}, "begin+="+tDelay) ; //word appearances for(var i = 0; i < numWords; i++){ //random value used as position parameter tl0.from(mySplitText.words[i], animTimeTextFade, {opacity:0}, (speedFactorTextFade*i)+animTimeInitial); } //pause tl0 tl0.pause(); //end intro video text timeline //begin define timeline variables for intro images var showMarkers = false; //tells the scrolltriggers defined below to show markers or not, boolean //for intro images var tDelay = 0; //delay before entire animation begins, seconds var inDur = 0.5; //duration of initial movement into view of intro image, seconds var textDelay = 0.1; //delay before text animates into view, seconds var textDur = 0.25; //duration of text movement into view, seconds var xPercentIntro = 10; //percent of intro element width to translate, percent var xPercentText = 100; //percent of intro text width to translate, percent var scaleIntro = 1; //initial scale of intro to animate in from, fraction var scaleText = .15; //initial scale of intro text to animate in from, fraction //end define timeline variables for intro images //begin mask timeline tl1 .addLabel("begin") //animate from left to right .from(mask, inDur, {x: -xPercentIntro+'%', opacity: 0, autoAlpha: 0, scale: scaleIntro, immediateRender: true}, "begin+="+tDelay) .from(mask.find('h2'), textDur, {x: -xPercentText+'%', opacity: 0, autoAlpha: 0, scale: scaleText, immediateRender: true}, "+="+textDelay) ;//end tl1 //begin social timeline tl2 .addLabel("begin") //animate from right to left .from(social, inDur, {x: xPercentIntro+'%', opacity: 0, autoAlpha: 0, scale: scaleIntro, immediateRender: true}, "begin+="+tDelay) .from(social.find('h2'), textDur, {x: xPercentText+'%', opacity: 0, autoAlpha: 0, scale: scaleText, immediateRender: true}, "+="+textDelay) ;//end tl2 //begin washing timeline tl3 .addLabel("begin") //animate from left to right .from(washing, inDur, {x: -xPercentIntro+'%', opacity: 0, autoAlpha: 0, scale: scaleIntro, immediateRender: true}, "begin+="+tDelay) .from(washing.find('h2'), textDur, {x: -xPercentText+'%', opacity: 0, autoAlpha: 0, scale: scaleText, immediateRender: true}, "+="+textDelay) ;//end tl3 inDur = 1; //animation duration for each word, seconds textDelay = 0.05; //delay time between words, seconds scaleIntro = 0.01; //initial word scale xPercentText = 50; //translate distance of each word, percent of its horizontal width yPercentText = 100; //translate distance of each word, percent of its vertical width effEase = 'elastic.out(1, 0.6)'; //ease type for each words marginDur = 0.5; //time of margin removal animation duration, seconds marginDelay = 1; //time before final margin removal animation, seconds //begin notEffective timeline tl4 .addLabel("begin") //animate each word //word: are .from(notEffective.find('span.word-large span:nth-of-type(1)'), inDur, {ease: effEase, y: -yPercentText+'%', opacity: 0, autoAlpha: 0, scale: scaleIntro, immediateRender: true}, "begin+="+tDelay) //word: not .from(notEffective.find('span.word-large span:nth-of-type(2)'), inDur, {ease: effEase, y: yPercentText+'%', opacity: 0, autoAlpha: 0, scale: scaleIntro, immediateRender: true}, "+="+textDelay) //word: effective .from(notEffective.find('span.word-large span:nth-of-type(3)'), inDur, {ease: effEase, y: -yPercentText+'%', opacity: 0, autoAlpha: 0, scale: scaleIntro, immediateRender: true}, "+="+textDelay) ;//end tl4 //begin ultraviolet text timeline var ultraviolet = $('section#ultraviolet'); var uvWords = ultraviolet.find('h2#tag-message'); var mySplitText = new SplitText(uvWords, {type:'words, words'}); var numWords = mySplitText.words.length; var animTimeTextFade = 2; //duration of text fade; var animTimeInitial = 0.5; //initial animation time var speedFactorTextFade = .375; //lower equals faster var tDelay = 0; //delay time before entire timeline animates, seconds var inDur = 1; //time for words container to fade in var fadeDur = 0.25; //fade in time duration for uvWords container, seconds //begin ultraviolet timeline tl5 .addLabel("begin") //fade in uvWords container .from(uvWords, inDur, {opacity: 0, autoAlpha: 0, immediateRender: true}, "begin+="+tDelay) ; //word appearances for(var i = 0; i < numWords; i++){ //random value used as position parameter tl5.from(mySplitText.words[i], animTimeTextFade, {opacity:0}, (speedFactorTextFade*i)+animTimeInitial); } //end ultraviolet timeline //begin scrolltriggers //mask ScrollTrigger.create({ id: "mask", trigger: mask, animation: tl1, markers: showMarkers, start: "top center" }); //social ScrollTrigger.create({ id: "social", trigger: social, animation: tl2, markers: showMarkers, start: "top center" }); //washing ScrollTrigger.create({ id: "washing", trigger: washing, animation: tl3, markers: showMarkers, start: "top center" }); //notEffective ScrollTrigger.create({ id: "notEffective", trigger: notEffective, animation: tl4, markers: showMarkers, start: "top center" }); //ultraviolet ScrollTrigger.create({ id: "ultraviolet", trigger: ultraviolet, animation: tl5, markers: showMarkers, start: "top center" }); //end scrolltriggers }//end if check for html not having class of ie11 //end GSAP and within the window.load area: //begin preloader fadeout $('div#preloader').fadeOut('slow', function(){ $('div#preloader').remove(); ariaHidden.attr('aria-hidden','false'); if (!html.hasClass('ie11')) { tl0.play(); } }); //end preloader fadeout I have my first timeline, tl0, start to play as it is at the top of the site (and the screen) after the site loads. When I remove the checks for IE11, IE11 never gets to the line: $('div#preloader').remove(); To cause the preloader overlay to disappear, as something is broken somewhere. My guess is the broken bit (whether it's caused by me or not) is causing the entire block of code not to work, or even the entire JS file. Anyway, I'm darned surprised I was able to get things working as I did. Any light that you could shed would be highly appreciated. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Hey @NeoDahl and @Joseph Levin. If there's an issue here we want to get it resolved as soon as possible. It'd be very helpful if you can create a minimal CodePen demo that only has code related to recreating the issue in IE11. It's very hard to debug on a live site, especially one that we don't have access to. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2020 Share Posted June 17, 2020 18 hours ago, Joseph Levin said: See: UVClean placeholder site In IE11, something is definitely off. If you look at your console, there's a JavaScript error. It looks like you're using a stale version of ScrollTrigger - please update to 3.3.3 and let us know if that resolves things for you. Like @ZachSaucier said, if you still need some help, please provide a reduced test case rather than a live site - it's just WAY more complicated to troubleshoot like that. We'd love to help. 1 Link to comment Share on other sites More sharing options...
Joseph Levin Posted June 17, 2020 Share Posted June 17, 2020 That sure did it for me..... Thank you for prompting me to check for the latest version! Now if I can only figure out why the video in IE11 shows up with a slightly dark background when accessed remotely, but not locally, I'll be all set :) Next time, I'll try to reproduce a reduced-case issue via Codepen before submitting. I really appreciate your help. Thanks again! 2 Link to comment Share on other sites More sharing options...
NeoDahl Posted June 18, 2020 Author Share Posted June 18, 2020 O My Goooooddddddd!!!! I'm really sooooorry about this happening. I found out the cause of problem. The problem is that IE11 not support ES6 (In my case, arrow function)..... lol Thanks for your helping. Have a nice Day 2 Link to comment Share on other sites More sharing options...
GreenSock Posted June 18, 2020 Share Posted June 18, 2020 1 minute ago, NeoDahl said: O My Goooooddddddd!!!! I'm really sooooorry abuot this happening. I found out the cause of problem. IE11 not support ES6 (ex. arrow function)..... lol Oh, good, I'm glad you figured it out. Thanks for letting us know! FYI, we do provide an ES5 version of all the GSAP files including ScrollTrigger, so it should work fine in IE. The CDN files are the minified ES5 ones that are highly compatible. I assume you were just using ES6 stuff in your own code, right? Or maybe loading the GSAP ES modules? 2 Link to comment Share on other sites More sharing options...
NeoDahl Posted June 18, 2020 Author Share Posted June 18, 2020 You're right Jack. I using the arrow function of ES6 1 Link to comment Share on other sites More sharing options...
heroldwebdesign Posted September 7, 2020 Share Posted September 7, 2020 SO glad you all had this issue for me to learn from!! I was shocked when my animations werent working at all in IE! Just when I was forcing myself to write using ES6 more often... haha Grateful to you all for this thread! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now