Joseph Levin

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!

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.

Absolutely! Thank you for your help!

You understood me perfectly. Thank you very much for helping me out, and so quickly. I appreciate it. I experimented and found that I could construct a timeline with multiple elements animating one after the other that would get triggered at the specified trigger point. When I set the scrub to "true", no matter the duration of the entire timeline it proportionately animated the timeline within the trigger endpoints. If I had a timeline with elA animating for 400 seconds, followed by elB animating for 200 seconds, the animation for elA would occur in first 2/3rd of the total vertical distance between trigger points, and elB in the next (or last) 1/3rd of that vertical distance, the speed of which was controlled by how fast I scrolled. (Total duration of my timeline equals 600s, so 400/600=2/3rd, 200/600=1/3rd). If I changed the individual element animation durations to 4 and 2, respectively, the proportions end up being the same. If I removed the scrub: true, then the animation would just play for it's entire duration once the first trigger point was reached. I had some difficulty with getting the syntax correct as the Simple Demo at Codepen didn't quite have the example setup as I was hoping. For example, I tried to just continue the code block from the Simple Demo: // Or you can attach a tween or timeline to a ScrollTrigger later const anim = gsap.to(".c", { x: 400, rotation: 360, duration: 3 }); with: // Or you can attach a tween or timeline to a ScrollTrigger later const anim = gsap.to(".c", { x: 400, rotation: 360, duration: 3 }) .to(".b", { x: 400, rotation: 360, duration: 3 }) ; after removing conflicting scrolltrigger related code, and it simply didn't work. My goal is to be able to setup a more elaborate timeline for a project I'm working on, and I think I can do that now. Thank you once again for your help! Y'all rock over here.

I am rather confused about how to synchronize GSAP timelines and ScrollTrigger. If we define the height of the vertical scrolltrigger endpoints, say, to the central 500px of the viewport, and we attach a long duration timeline to that scrolltrigger definition (while animating multiple elements at different points of time within the overall timeline duration of 6 seconds), it seems likely that the timeline animation as a whole would not necessarily finish by the time the user would scroll past the ending point of the scrolltrigger. Is there a way to define a timeline so that it finishes at the exact point the user scrolls to or beyond that vertical endpoint? Kind of like a proportional overall duration for that timeline? Thank you for your help!

Turns out the issue I was having was solely because of my not doing the better practice of not setting a new path element value into firstSVG. My guess now would be that the reason the following worked in my original pen was that the end morph was being asked to morph firstSVG (as #drupal) into secondSVG (as #drupal) and that the saved path data originally in the #drupal path was being referenced by the morphSVG plugin. firstSVG=$(slideArray[currSlideIndex-1][0]); Once again, thank you very much for all of your help. I'm good now and rarin' to go get into some more GSAP!

I put it in my comment without my fully understanding your modified pen and how you were working it. After I looked closer at the modified pen, I saw what you were talking about and removed my comment. Your JS is more sophisticated than my own and I have to ponder what you did a bit more; I think I can modify your code to not loop, as I require. Thanks for your help!

Not me; I don't run around in circles , nah, never. Having a beginning and an end for the series of morphs is what I was trying to do from the beginning. The idea for what I'm working on is that, eventually, once the last morphing tween completes, another timeline will be made to run- The last shape will fade out and another logo with some buttons that the User will be able to select for more information will fade in (or something like that). That's why I need an "end" point for the set of morphs. Take care!

Craig, Your demo loops, while I wish mine to end when the last animation has occurred. I modified the code in your pen like so: if ($(this).index() === 0) { i > 0 ? i-- : i = 0; morphIt(); } else { i < max ? i++ : i = max; morphIt(); } And that gets me the end points I was looking to hold on to. I realized that if my order changed with the static definition of my array, I'd have to redo all of the indices, and that is no good. So I changed my array to push the data in: var slideArray = []; //slots in the 1,2,3,4,5 areas may be for future use slideArray.push(['#drupal',1,2,3,4,5]); slideArray.push(['#twitter',1,2,3,4,5]); This way, if I delete, add or re-order items I don't have to reindex manually or worry about what comes before or after each item in the array. I will push forward (no pun intended) and see what I can get to work. Thank you all for your help today! (Just a side note- I am majorly impressed with how fast I have received responses here in the GS forums, and also how helpful the replies have been! Y'all and GS rock!)

Carl, Thanks for your quick reply. I did not end up changing the pen since I posted my issue; sometimes I've noticed that Codepen pens that have a lot of dependencies need to be reloaded occasionally for everything to work. In either event my embedded pen seems to be working. When you said: I checked into the pen you embedded and saw how you were always morphing from the initial svg element path into the other paths. I can retool my pen to use this method and see if things work better without my having to resort to "magic" (as my comment in my pen would suggest). However, because you brought it up about always morphing from the initial svg element's path, I am wondering how my pen was able to get back to showing the original #drupal path's shape if the #drupal path was changed through the morphing process?

Hello everyone! I'm new to GSAP, and maybe I'm just tired at the moment and not seeing things clearly, but I'm having a lot of difficulty with a simple slideshow using the GSAP MorphSVG plugin. In my pen I have a series of <svg> elements defined which, when the .svgbox the svgs are held in is swiped left or right, morphing is supposed to occur. Basically, on a "touch swipe" (or a "drag" with the mouse), I determine the "firstSVG" and the "secondSVG" that the firstSVG is to be morphed into. This seemed to work perfectly when swiping "left", but when swiping "right", I ran into some issues with the morphs not occurring. This line taken from my pen (under the portion of the code that handles a "right" swipe) seemsto be part of the problem: firstSVG=$(slideArray[currSlideIndex-1][0]); //index within array should be currSlideIndex rather than currSlideIndex-1. Magically, it works. I originally had this line to be: firstSVG=$(slideArray[currSlideIndex][0]); such that the currSlideIndex, firstSVG and secondSVG values were adjusted properly (but the morphs don't act as expected). When I set the code to be as it is currently: firstSVG=$(slideArray[currSlideIndex-1][0]); The firstSVG and secondSVG values come up at times as being the same value (but the morphs work fine in either swipe direction). I'm at a loss and would greatly appreciate any help anyone could provide. PS: Clicking on "run pen" will show the pen more as it is expected to be seen. The very bottom of the purple box showing the firstSVG and secondSVG values is cut off in the embedded pen for large browser sizes. Please resize your browser a bit to see the entire content or open it up on Codepen to see what I'm asking about. Thank you very much, in advance. -Joe