romain.gr

Hi Zach, Great thanks, I was pretty sure that option was available but yes, I couldn't find it in the doc. Thanks again for the quick answer, I couldn't expect less from the GSAP team and users. Here is my version (still using the older gsap and from my original code), I've just added some option so can tweak the animation https://codepen.io/romaingranai/full/YzXwLvz

I finally manage to make it work, but if anyone has a better idea I'm still interested. https://codepen.io/romaingranai/pen/YzXwLvz

Hi, I'm working on a little experiment using gsap and the svg ConvertToPath function, I was wondering if, instead of replacing the <rect> element by a path element, it was possible to save the result of the conversion into a variable and not deleting the original <rect> element. On resize event I'm actually calling that convertToPath function but if it remove the original <rect> el, it can't do the conversion anymore as that element has been "replaced". What I try to achieve (see codepen), is everytime you resize the screen, the rect conversion to path is saved in a variable, so that I can append (or prepend) the new path to the <svg>, and the text will follow the new path. At the moment when you resize the screen the text follow the path created on load. So first I'd like to know if it's doable (saving the rect conversion into a variable instead of swaping it by a path el), and then I'm curious how others would achieve that text effect (with html, css and svg, not with canvas). Thank you

Hi, I'm struggling doing something very simple, can someone explain me what's wrong with this : $('a').on('click', function(e){ e.preventDefault(); var thisId = $(this).attr('href'); console.log(thisId); TweenMax.to(window, {duration: 2, scrollTo: thisId}); //TweenLite.to(window, {duration: 2, scrollTo: thisId}); //TweenMax.to(window, {duration: 2, scrollTo: {y: '100', offsetY: 50}}); //TweenMax.to(window, {duration: 2, scrollTo: 400}); }); I'm unable to make this work even tho it seems to be very simple to make it work, I'm following the documentation (well, I guess) : //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); In my code, none of the commented is working + I'm using the old version of GSAP : TweenMax et ScrollToPlugin: Version 2.1.3 Thank you ////////////////////////////////////////// Well, I'm not really sure why the documentation has been totally modified for the new version of GSAP, without leaving any information about the previous versions : so for the previous version : TweenMax.to(window, 2, {scrollTo: thisId}); and for the new version : TweenMax.to(window, {duration: 2, scrollTo: thisId}); Is it possible to still have access to the documentation for the previous Versions of GSAP or it has been deleted for ever?

Hey, I've been playing with your version, actually I'm trying to add some delay label and remove classes (it remove the "letter-blink" class for each letter, and give that "typing" effect), but as soon as I'm adding this "end" label to the anim.staggerFrom(chars, 0, { autoAlpha: 0, display: 'none' }, 0.1, 'end'); , it works for the first item but break the rest of the animation. It seems quite easy to achieve but I'm on that for at least 2 hours. var targets = document.querySelectorAll(".home-title__slider__item"); var anim = new TimelineMax({ paused: true, repeat: -1 }); for (let i = 0; i < targets.length; i++) { var splitTextItem = new SplitText(targets[i], { type: "chars", charsClass: "letter letter-blink" }); var chars = splitTextItem.chars; anim.set(targets[i], { autoAlpha: 1, display: "block", delay: .5 }); anim.staggerFrom(chars, 0, { autoAlpha: 0, display: 'none' }, 0.1, 'end'); anim.staggerTo(chars, 0, {css:{className:'-=letter-blink'}}, 0.1, 'end+=.1'); anim.set(targets[i], { autoAlpha: 0, display: "none", delay: 2 }); } anim.play(); https://codepen.io/romaingranai/pen/PrOQJK Thanks

That's exactly what i need. I knew I needed a loop, didn't know how to make it. Thanks a lot

Hi, I have created a timeline and some split text, the result is good (that's what I want to achieve), but how can I loop through each items and animate them one after the other. It's working in my case but it's not very maintainable, what if I had one more item in the html? I would have to add stuff to my timeline all the time, I'm a bit confused, I've been trying different options without success. Here is the structure : <h1 class="home-title" > <span class="home-title__slider__item home-title__slider__item--active"> <span>WE EXIST TO DEEPEN</span><span>OUR UNDERSTANDING OF</span><span><b>EDUCATIONAL CHALLENGES</b></span><span><b>AND HELP FIND SOLUTIONS</b></span><span><b>TO TACKLE THEM.</b></span> </span> <span class="home-title__slider__item"> <span>WE EXIST TO FORGE</span><span><b>PARTNERSHIPS</b> </span><span><b>TO STRENGTHEN</b> </span><span><b>THE IMPACT</b> </span><span><b>OF OUR WORK.</b></span> </span> <span class="home-title__slider__item"> <span>WE EXIST TO BUILD</span><span><b>INNOVATIVE PROGRAMS</b></span><span><b>THAT ADDRESS</b></span><span><b>EDUCATION PRIORITIES.</b></span> </span> <span class="home-title__slider__item"> <span>WE EXIST TO INFORM </span><span><b>EDUCATION POLICY</b></span><span><b>-MAKING THROUGH</b></span><span><b> RIGOROUS RESEARCH.</b></span> </span> </h1> Here is the JS : var splitTextItem1 = new SplitText($('.home-title__slider__item')[0], {type:"chars"}), chars1 = splitTextItem1.chars, splitTextItem2 = new SplitText($('.home-title__slider__item')[1], {type:"chars"}), chars2 = splitTextItem2.chars, splitTextItem3 = new SplitText($('.home-title__slider__item')[2], {type:"chars"}), chars3 = splitTextItem3.chars, splitTextItem4 = new SplitText($('.home-title__slider__item')[3], {type:"chars"}), chars4 = splitTextItem4.chars; var tl = new TimelineMax({pause: true, repeat: -1}); tl.set($('.home-title__slider__item')[0], {autoAlpha: 1, display: 'block', delay: 2}) .staggerFrom(chars1, 0, {opacity: 0}, .05) .set($('.home-title__slider__item')[0], {autoAlpha: 0, display: 'none', delay: 2}) .set($('.home-title__slider__item')[1], {autoAlpha: 1, display: 'block'}) .staggerFrom(chars2, 0, {opacity: 0}, .05) .set($('.home-title__slider__item')[1], {autoAlpha: 0, display: 'none', delay: 2}) .set($('.home-title__slider__item')[2], {autoAlpha: 1, display: 'block'}) .staggerFrom(chars3, 0, {opacity: 0}, .05) .set($('.home-title__slider__item')[2], {autoAlpha: 0, display: 'none', delay: 2}) .set($('.home-title__slider__item')[3], {autoAlpha: 1, display: 'block'}) .staggerFrom(chars4, 0, {opacity: 0}, .05) .set($('.home-title__slider__item')[3], {autoAlpha: 0, display: 'none', delay: 2}) tl.play(); Could someone suggest a solution I could try? Thank you

Hi, var openNavigation = new TimelineMax({ paused: true, onComplete: function(){closeNavigation.restart().pause()} }); openNavigation .set($navigation, {display: 'block'}) .fromTo($navigation, .5, {opacity: 0, width: 0},{opacity: 1, width: $(window).width() - 20, ease: Power4.easeInOut}) .fromTo($navigation, 1, {height: 2},{height: $(window).height() - 20, ease: Power4.easeInOut}, '-=.2') .set($navigation, {width: '', height: ''}); I'm trying to animate a navigation from width: 0 to width: $(window).width() - 20, it's working fine until I resize the window. When I resize the window, it keeps the first size of the width in memory, although the $(window).width() - 20 should always be different. How could this be achieve? So to reproduce the issue : 1. Open the nav by clicking on the Menu button (the nav width/height expand to take full window width/height less 20px ). 2. Closing the nav by clicking on the white button in the top right corner (the nav fadeout) 3. Resize the window 4. Re-open the nav (the nav width/height expand to the previous dimension) Is there a way to update (pass new window width as argument?) those value each time the animation is run? Thank you.

Hi Jack, Yes it solves the issue, thanks a lot. ?

Hi, I'm working on a little typographic experiment, and on tweening the SkewY value I was surprise to see the element shrinking vertically a bit like a rotate was applied. I have tried without gsap, only in css and it works fine. what could it be? How can I fix that. To see the issue on the codepen : - move your cursor in the top right corner - open - write a word in the text field and click the ok button - move the 'SkewY div' range you'll then see a gap between each div, that shouldn't be the case as I'm "skewing" not rotating. Thank you GSAP VERSION with gap between each skewed element CSS version without gap (that's what I want).

Here is another example which was working in Chrome some time ago and not working anymore (still using svg filter) : https://tympanus.net/Development/DistortedButtonEffects/ buttons 5,6,7,8,9 and 10 Still working nicely with Firefox

I've noticed that few month ago actually.

Hey Sahil, Nice one, thanks for that, I have the feeling that some stuff change some time ago with the rendering of SVG in the browser, the first demo I did (actually the first pen, that I modified some day ago), was working ok (not perfectly), but at least the animation and the rendering of the blur was working fine. And I think it's not the only issue I found when using svg filter in general, like displacement map, . I was wondering if someone could explain me what exactly happens and happened? Like this example doesn't really work : (SVG displacement map) and I'm pretty sure it was working If anyone has any other ressources or can explain why it stops to work or why it render super badly,... Anyway, thanks you Sahil.

Hi, I'm trying to animate the stdDeviation attribute of a svg filter, it's actually working when I inspect the element, it's updating the attribute, but the rendering is either very bad and slow (firefox) or not rendering at all (chrome). Are the browsers struggling to render properly an animated svg filter? the SVG filter (if stdDeviation="0 20" it works fine but if I animate the values it render very pourly) : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewPort="0 0 500 300"> <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur id="test" in="SourceGraphic" stdDeviation="0 0" /> </filter> </svg> the CSS : p { width: 50%; margin: 0 auto 50px auto; font-size: 35px; font-weight: bold; color: white; filter: url("#blur"); } and JS : let currentPixel = window.pageYOffset; const looper = function(){ const newPixel = window.pageYOffset; const diff = newPixel - currentPixel; const speed = diff * .1; const blur = speed < 0 ? speed * -1 : speed; //console.log(speed); //TweenMax.to($('.item-content'), .5, {skewY: speed + 'deg'}); TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur}}); //TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur * 2}}); currentPixel = newPixel; requestAnimationFrame(looper); } looper() Once again, GSAP seems to do the job properly, but the rendering on the screen is terrible. I might miss something very basic. If anyone has an idea,... Thank you

Hi guys, Sorry for late answer, I haven't had the chance to look at all your answers yet as I had to switch on another project, I'll do it as soon as I can. Thank you

Hi, I'm wondering if it would be possible to randomise number AND pass it to the animation on update: $('.dot').each(function(e){ var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update}); var timing = Math.floor(Math.random() * 10) + 8, posY = Math.floor(Math.random() * 90) + 0, posX = Math.floor(Math.random() * 100) + 0; function update(){ timing = Math.floor(Math.random() * 10) + 1, posY = Math.floor(Math.random() * 90) + -90, posX = Math.floor(Math.random() * 6) + 1; // console.log(timing, posY, posX); // floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh'}); // floatingThis.play(); } console.log(timing, posY, posX); floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone}); }); I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho. Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding). Thank you

Hi guys, thanks for your involvement, I really appreciate it. I'm going to have a look at all that and I'll post the final version here when done. Thank you.

True

Hi @Accent, Thanks for your answer, I'm going to have a look, but your pen seems to behave as I would like ;). The top level items are links to pages that s why I wrapped them inside a <a>. I wasn't using classes at first because that nav is going to be generated by Wordpress, even tho I think I can insert classes in some way, not sure yet what I'm gonna do. I'm planning to make the navigation slightly different on touch devices, so it shouldn't be an issue atm, but thanks for all the advices, I'll have a look at your pen and I'll post the final prototype here (I'm planning to add cool animations, wowowowowo).

That s exactly why I wasn't using classes at first, but I guess I'll be able to insert those classes with Wordpress, it shouldn't be a big deal.

Hi, I'm trying to create a navigation with different levels, I thought it would be easier but I'm missing something. So, on mouseover over an item it should open THIS item ul, but at the moment it's opening ONE item ul. The problem is that I create my variables : var $firstLevelItems = $('.main-nav > li'), $secondLevelNav = $('.main-nav > li > ul'), $secondLevelItems = $('.main-nav > li > ul > li'), $thirdLevelNav = $('.main-nav > li > ul > li > ul'), $thirdLevelItems = $('.main-nav > li > ul > li > ul > li'); then the animation, and pause it : var openSubNav = new TimelineMax({paused: true}), openSubSubNav = new TimelineMax({paused: true}); then create the animations: openSubNav.fromTo($secondLevelNav, .8, {display: 'none', height: 0}, {display: 'block', height: '100vh', ease: Power4.easeInOut}) .staggerFromTo($secondLevelItems, .5, {display: 'none', y: '20px', autoAlpha: 0, ease: Power4.easeInOut}, {display: 'block', y: '0', autoAlpha: 1, ease: Power4.easeInOut}, .05, '-=.5'); openSubSubNav.staggerFromTo($thirdLevelItems, .5, {display: 'none', y: '20px', autoAlpha: 0, ease: Power4.easeInOut}, {display: 'block', y: '0', autoAlpha: 1, ease: Power4.easeInOut}, .05); and on mouseover I start the animation: $firstLevelItems.on('mouseover', function(){ // var $thisSubNav = $(this).find('>ul), // var $thisSubItem = $thisSubNav.find('>li); // Then pass those elements to the animation // Should I create the animation INSIDE the 'mouseover' HERE??? openSubNav.play(); }); $firstLevelItems.on('mouseleave', function(){ openSubNav.reverse(); }); This is working, but it's not opening THIS menu item. I'm sure it's something simple but I'm stuck on that. As you can see on the pen, for each menu items it's opening the only sub UL and sub LI.

Hi Jack, Perfect, thanks.

Hi Carl, Again, thanks for the quick answer, however I'm still a bit confused. I'm not working with a path here but with polygon points. According to the documentation I can morph polygon points to another polygon points value (But I guess I misunderstood): https://greensock.com/morphSVG#yA5pwirBtQCw7QkgdQWN Points for <polyline> or <polygon> elements: TweenLite.to(“#polygon”, 2, {morphSVG:"240,220 240,70 70,70 70,220"}); Furthermore, what is the difference between my working points (on my first demo, those values are working, even tho they aren't converted to path): var originalStep = '.08 0 .55 .21 .13 1 1 1 1 0'; var step2 = '.34 0 .13 .89 .89 1 1 1 1 0'; and the invalid ones : var step1 = '.21 0 .55 .89 .08 1 1 1 1 0'; var step3 = '.34 0 .55 .21 .08 1 1 1 1 0'; Thanks for your demo, however the variables should be (I think) : var originalStep = 'M.08 0 .55 .21 .13 1 1 1 1 0', step1 = 'M.21 0 .55 .89 .08 1 1 1 1 0', step2 = 'M.34 0 .13 .89 .89 1 1 1 1 0', step3 = 'M.34 0 .55 .21 .08 1 1 1 1 0'; instead of (step1): var originalStep = 'M.08 0 .55 .21 .13 1 1 1 1 0', step1 = 'M21,0 55,89 8,1 1,1 1,0', step2 = 'M.34 0 .13 .89 .89 1 1 1 1 0', step3 = 'M.34 0 .55 .21 .08 1 1 1 1 0'; I'm working on another demo with polygon and I have no problems with my values and I didn't had to convert it to path :

Hi, I have a weird issue, it seems that apparently some of my polygon points are not valid (see Codepen). I can't figure out what's wrong as those value are generated by Sketch app : <svg width="92px" height="100px" viewBox="0 0 92 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Touch-Bar-Copy-2" transform="translate(-8.000000, 0.000000)" fill="#D8D8D8"> <polygon id="Path-4" points="34 0 55 21 8 100 100 100 100 0"></polygon> </g> </g> </svg> Then converted in percent, so : .34 0 .55 .21 .8 1 1 1 1 0 I said "some" because some other works .eg : Not valid : var step1 = '.21 0 .55 .89 .08 1 1 1 1 0'; var step3 = '.34 0 .55 .21 .08 1 1 1 1 0'; Apparently valid : var originalStep = '.08 0 .55 .21 .13 1 1 1 1 0'; var step2 = '.34 0 .13 .89 .89 1 1 1 1 0'; Thank you.

Hi Carl, Thank you.