fr en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en el el en en fr en en en en en en en en en en fr en en en en en en en en sv en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en el en en en en en fr en en en eu en hu en de en es en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
DrawSvg with non-scaling-stroke on path and preserveAspectRatio="none", path length wrong
romain.gr replied to romain.gr's topic in GSAP
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 ;).
romain.gr posted a topic in GSAP
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
What is happening, issue with multiple scrolltrigger and one is pinned
romain.gr replied to romain.gr's topic in GSAP
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!
What is happening, issue with multiple scrolltrigger and one is pinned
romain.gr posted a topic in GSAP
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.
How to play a scrubbed/pinned animation only once? And then delete the wrapping pin-parent.
romain.gr replied to romain.gr's topic in GSAP
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!
How to play a scrubbed/pinned animation only once? And then delete the wrapping pin-parent.
romain.gr posted a topic in GSAP
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.
ScrollTrigger, stagger anim + other animation issue
romain.gr replied to romain.gr's topic in GSAP
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.
ScrollTrigger, stagger anim + other animation issue
romain.gr replied to romain.gr's topic in GSAP
@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.
ScrollTrigger, stagger anim + other animation issue
romain.gr replied to romain.gr's topic in GSAP
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?
ScrollTrigger, stagger anim + other animation issue
romain.gr posted a topic in GSAP
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
Advices for using Locomotive Scroll and Gsap ScrollTrigger pin horizontal scroll
romain.gr replied to romain.gr's topic in GSAP
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.
Advices for using Locomotive Scroll and Gsap ScrollTrigger pin horizontal scroll
romain.gr replied to romain.gr's topic in GSAP
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
“@greensock is just pure awesomeness. What more can be said?”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“Sincerely, the people behind GSAP are sorcerers”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.