Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,932 profile views

romain.gr's Achievements

  1. Thank you for all your answers, @OSUblake, I had a quick look at your pen, it works very well for your used case, when only a word is selected, when the 'circle' stay always almost the same (i mean, not too spread, cause obviously without the vector-effect="non-scaling-stroke" the path stroke width is bigger on the edges) and I might use your example for similar kind of work. But I might have an idea, I could create multiple paths, all having a different width, and call them depending on how many words my span contains, let say that I create 10 different path in Illustrator from small to wide, and insert them in the dom based on the number of letter contains in a span. That might be the solution, cause I want to keep some king of flexibility (giving the client the possibility to surround any word in a sentence in the back-end administration) that vector-effect="non-scaling-stroke" gave me but obviously without the down side of that technique. I'll post the result here when I'm working on it again. Obviously I did not ignore the warning in the console, I was just wondering if, somehow, it was possible to (re)calculate the length of that path manually by dark mathematic functions, as suggested by @Cassie Thank you for your help and directions.
  2. Hi @Cassie, I actually stumble across that thread on stack overflow during my researches, tried to integrate the solution to my case, without success. Thank you for trying ;).
  3. Hey @mvaneijgen, it's used to "scale" the path, if you scale it without vector-effect="non-scaling-stroke", the path will look squashed, by using it it resize the path but not the stroke (the first codepen has been updated, 2 exact same path). That way it would be super flexible and I could create, let say 20 different paths (using the same logic : a 100/100 svg parent, thus the path points are expressed in %, that way the path could adapts to any word length, that actually works if the path is not animated, + it's responsive). But more I think about it and more I'm wondering how can the stroke 'thickness' can affect the length of the path.
  4. Hi @mvaneijgen, thanks for you answer, but your example is missing a few things. 1. I'm using illustrator with the pen, the d attribute of the path looks pretty much the same as yours. 2. you remove everything in your example, the shape needs to surround some text, and adapt itself to the word it surrounds. 3. the vector-effect="non-scaling-stroke" and preserveAspectRatio="none" are missing from the path and the svg element, and for sure those attributes are causing the miscalculation of the path length. I quickly remade your example to include all those parameters and I have the same issue, without changing your path: https://codepen.io/romaingranai/pen/jOYVaOp Thank you
  5. Hi, I've trying to achieve something and I'have read plenty of gsap forum threads on the subject without finding the solution. On the codepen you can see that some words are surrounded by a svg path stroke, I'm trying to animate that line, like a line drawn by a pen around a word. But it looks like the path length is not correctly calculated by GSAP (?), I first thought about a browser inconsistency (as read in other threads), but it's doing the same on all browsers. The problem is fixed by removing preserveAspectRatio="none" on the svg element, but obviously it's not what I try to do. You can see the end line is drawn at the same time as the start line. Not really sure if it's doable as I really checked all around the forum, if someone has another way to achieve this and keeping the flexibility of resizing the path to the word width and height. Thank you
  6. Any clues? What could be the problem? are my ScrollTriggers created in the wrong order? Could anyone redirect me to any post on the forum? It drives me crazy!
  7. I've been searching around an answer without success, I thought first it was an issue with the order I create the scrollTrigger but apparently not as creating them in different order doesn't fix the issue. So what I'm trying to achieve is: 1: logo animation then when the animation is finished, and the block unpinned 2: when the logo touch the top of the viewport => do something So I have 2 scrollTrigger created first one that scrub the logo and then the second one that check when the logo is touching the top of the screen, unfortunately the second one starts way too earlier (you can see the markers). logoAnim = gsap.timeline(); ScrollTrigger.create({ animation: logoAnim, trigger: '.header', pin: true, start: 'top top', end: ()=>{ '+=' + window.innerHeight / 2 }, scrub: .5 }); logoAnim .addLabel('letter-dis') .to('.letter--is-leaving--severin', {autoAlpha: 0, xPercent: -10, ease: Expo.easeOut, stagger: { amount: 1, from: 'end' }}, 'letter-dis') .to('.letter--is-leaving--anja', {autoAlpha: 0, xPercent: 10, ease: Expo.easeOut, stagger: { amount: 1, from: 'start' }}, 'letter-dis') .fromTo('.letter--plus', {width: '5em'}, {width: '1em', duration: 1.5}, 'letter-dis'); ScrollTrigger.create({ trigger: 'h1', start: 'top top', end: '+=5000000000', markers: true, onEnter: () => { $('.top-bar').addClass('top-bar--visible'); $('h1').addClass('invisible'); }, onLeaveBack: () => { $('.top-bar').removeClass('top-bar--visible'); $('h1').removeClass('invisible'); } }); What is happening? Thank you The documentation says about the refresh Priority : number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers. I conclude that if ScrollTrigger are created in the order they appears on the page, the pinning distance of the first is being added to the start/end of subsequent Scrolltriggers, which should be my case. But no pinning distance is added to my second scroll trigger! Why? I', getting super confused.
  8. Hi @Akapowl, Thanks for the help, the only solution that worked in my situation is this thread, cause the 2 other ones doesn't really fix the issue of having multiple scrollTrigger later. So the solution is to refresh all scrollTrigger. Thank you!
  9. Hi, As the title says, I'd like to play a scrubbed/pinned animation only once and as soon as it finished clear up the inline css from the pinned item and remove the pin spacer parent from the dom, so when you scroll up again no animation occurs and I don't have have to scroll '3 windows.innerHeight' to reach the previous section. I actually managed to do it BUT : - I'm wondering if it's the proper way to do? Maybe there is a built in solution? - Is it going to cause issues if I have other scrollTrigger down in the page? I thought that just Killing the anim would do the job but I might not read the doc properly altought it says : "Kills the ScrollTrigger instance, immediately unpinning and restoring any pin-related changes made to the DOM by ScrollTrigger and removing all scroll-related listeners, etc." But actually it's not working that way, it does "cancel" it, but it doesn't clear up the pinned item and doesn't delete the pin-spacer. So I killed the dropCard anim, and clearProps on both the section and the pinSpacer. So here is the code : let dropCard = gsap.timeline({ onComplete: ()=> { // When the whole anim is finished initDrag(); // init draggable items dropCard.kill(); // Kill THIS ScrollTrigger gsap.set('.section--drop-card', {clearProps: 'all'}); // Clear up this section from added CSS from GSAP gsap.set($('.section--drop-card').parent('.pin-spacer'), {clearProps: 'all'}) // Clear up this section PIN PARENT from added CSS from GSAP }, // yes, we can add it to an entire timeline! scrollTrigger: { trigger: '.section--drop-card', pin: true, // pin the trigger element while active start: "top top", // when the top of the trigger hits the top of the viewport end: () => { return "+=" + window.innerHeight * 3}, // end after scrolling 500px beyond the start scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar markers: true } }); dropCard .from('.card', {scale: 2, 'border-width': '0.05vw', rotateX: (i)=>rotationX[i], rotateY: (i)=>rotationY[i], duration: 1, ease: Power3.easeIn, stagger: .2}, 'start') .from('.card', {autoAlpha: 0, duration: .5, ease: Power3.easeIn, stagger: .2}, 'start'); Thank you.
  10. Yes, I guess we would need to find the longer staggered tween then find the other stagger and use the amount property to split the animation. I don't have example right now, and in my project I'm not planning using multiple staggers, but I'll definitely make a little demo in the next couple of days to test, try to fix that and share it here for help or to show how it might be done! Thank you again.
  11. @OSUblake Got it now, it starts at the same time but obviously the stagger takes longer. And the way to sync all tweens to start and end at the same time, is to use the duration attribute on simple tweens. But what if we have multiple stagger in the same timeline? Sorry for earlier answer, my bad, it was a long long day. I re-red it and tried, it clearly answers my question, so thanks for it and the detailed answer later.
  12. No duration has been set, I'm using scrub and I've set the end trigger value to twice the screen width. I don't really want to create 2 different timelines and 2 scrollTrigger, I d like to use only one timeline and one scrollTrigger which include a simple tween and a stagger animation. Is it because I have stagger: .25? As i understand the duration is related to the scroll distance (in this case the end), the duration is how fast you scroll (?). Is it possible to achieve the result of animation 2 (2nd screen in the codepen) but only using one timeline and one scrollTrigger?
  13. Hi, There is something that doesn't make sens to me, I'm animating a timeline with stagger and other tweens, all must be "played" in the same time, I'm using for that the delay label : "sameTime" $('.section--title-1').each(function(){ var thisSpan = $(this).find('span'); var thisSquare = $(this).find('.square'); let titleTL = gsap.timeline({ scrollTrigger: { trigger: $(this), scrub: true, pin: true, pinSpacing: true, start: 'left left', end: () => {return '+=' + window.innerWidth * 2 + 'px'}, //markers: true, invalidateOnRefresh: true, refreshPriority: 1 } }); titleTL .to(thisSpan, {autoAlpha: 1, y: 0, ease: Power1.easeInOut, stagger: .25}, 'sameTime') .to(thisSquare, {x: -window.innerWidth + 100 + 'px'}, 'sameTime'); }); So the desired behaviour would be : the end of the square tween will happen at the same time as the end of the staggered animation, but that's not the case, the square tween finished before the span animation. I've found a workaround which is creating 2 different timelines, one for the stagger and one for the square animation : $('.section--title-2').each(function(){ var thisSpan = $(this).find('span'); var thisSquare = $(this).find('.square'); let titleTL = gsap.timeline({ scrollTrigger: { trigger: $(this), scrub: true, pin: true, pinSpacing: true, start: 'left left', end: () => {return '+=' + window.innerWidth * 2 + 'px'}, //markers: true, invalidateOnRefresh: true, refreshPriority: 1 } }); let squareTL = gsap.timeline({ scrollTrigger: { trigger: $(this), scrub: true, pin: true, pinSpacing: true, start: 'left left', end: () => {return '+=' + window.innerWidth * 2 + 'px'}, //markers: true, invalidateOnRefresh: true, refreshPriority: 1 } }); titleTL .to(thisSpan, {autoAlpha: 1, y: 0, ease: Power1.easeInOut, stagger: .25}, 'sameTime'); squareTL .to(thisSquare, {x: -window.innerWidth + 100 + 'px'}, 'sameTime'); }); The second version works great but I found that it's : 1: not very logic 2: a bit ugly Is there a way to make the first way working as I'm expecting or there's something I don't understand? Thank you
  14. Hi, Just wanted to say that if anyone experiences wider scroll than the content using GSAP and Locomotive scroll, here is 2 reasons why it can happen : 1. An unclosed tag somewhere, couldn't believe I missed it! And very strangely 2. When you leave a markers: true in your scrollTrigger. So more you have markers to debug, more wide will be the "further-scroll". Just remove the markers: true.
  15. Hi @akapowl I've made some changes, following your advices and that works very nicely! Thank you. Except for one thing, it scrolls further the last slide/section. It seems the scroll distance is not correctly calculated. It drives me nut for hours and it's not the first time I have that issue with Loco scroll, and for info nothing is depending on images size (so no prob with image not loaded), as everything is size in css in vw,...! I literally copy/past and adapt your code adapted it with my content. It's definitely a Loco scroll issue so I'll ask there if nobody has an idea on what s going here. Thank you! https://codepen.io/romaingranai/pen/vYJmPqO