Jump to content


  • Posts

  • Joined

  • Last visited

romain.gr's Achievements


Newbie (1/14)



  1. 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
  2. That's exactly what i need. I knew I needed a loop, didn't know how to make it. Thanks a lot
  3. romain.gr

    SplitText Loop

    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
  4. 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.
  5. Hi Jack, Yes it solves the issue, thanks a lot. ?
  6. 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).
  7. 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
  8. I've noticed that few month ago actually.
  9. 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.
  10. 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
  11. 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
  12. 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
  13. 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.
  14. 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).