Jump to content
Search Community

ScrollTrigger is not working in IE11

NeoDahl test
Moderator Tag

Recommended Posts

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

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

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.

 

 

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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!

 

  • Like 2
Link to comment
Share on other sites

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 :)

 

 

 

  • Like 2
Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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.
×
×
  • Create New...