Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

romain.gr

Members
  • Posts

    34
  • Joined

  • Last visited

Everything posted by romain.gr

  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).
  15. 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.
  16. 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.
  17. 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 :
  18. 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.
  19. Hey Carl, it's exactly that, good job. I'd like to understand why switching from TimelineLite to TimelineMax does the trick? Another question, are those Pens always available (so then I can check those when I need it), or it's better if I copy them into my own Codepen? Thank you
  20. Hi, thanks, I'm going to play around that solution. I have another issue, I think it's related (because of the timing), the problem is that the whole animation needs to be finished to start again. I'd like that each line move to left then right continuously, like a moving flag actually. We can just focus on the first line, it goes to right then come back to left, what I'd like to achieve is that the line as soon as it came to the original point start straight away to re-animate (right then left) and so on, yes, like a moving flag. Thank you btw
  21. Hi, I was wondering if it was possible to create an animation and 'stagger' it over a list of element. I explain myself, when using stagger you can only use the 'y' (or other css property) property only once like this : var tlGo = new TimelineMax({paused: true, repeat: -1}); tlGo.staggerTo(".line", 1, {x:50}, 0.005); // In this case each line would go x:50 one after the other // But what if I want to do x:50 then x:0 one after the other??? What if I want to stagger a more complex animation : var tlGo = new TimelineMax({paused: true, repeat: -1}); tlGo.staggerTo(".line", 1, {x:50}, {x:400}, {y: 200}, {x: 100}, {y: 50}, 0.005); //This obviously won't work, it's a way to explain my point. What I would like to do is something like that (creating a complete animation) : tlGo.to(".line", 1, {x:50}, 0.005) .to(".line", 1, {x:300, y: 20}, 0.005) .to(".line", 1, {x:20, y: 200}, 0.005); and then stagger this to each element. I'm thinking about using a simple loop, but I would prefer do it the GSAP way if a GSAP way is available. Hope you understand my question. Thank you In the Codepen example I'm doing like this : var tlGo = new TimelineMax({paused: true, repeat: -1}); tlGo.staggerTo(".line", 1, {x:50}, 0.005) .staggerTo(".line", 1, {x:0, ease:easing}, 0.005, '-=.99'); But it's not exactly what I want to do. The timing is really hard to manage that way.
  22. Hi Jonathan, Thanks for all those details, very well explained, I'll definitely use that little trick with display none
×