Black Ducas

Hi at the moment the scroll controls the progress of each tweens of the timeline. Instead, after the section is pinned, I'd want that each scroll will starts each tweens. Practically: section is pinned; I scroll -> start first tween (with its progress independent from the scroll); scroll again -> start 2nd tween (with its progress independent from the scroll); and so on. How can do it? thanks https://codepen.io/gooogooo/pen/OJqdEgW

Thanks @mvaneijgen I thought the Rodrigo code worked on that point, maybe something is changed from 9 years ago, my fault. I'm not understanding why the progress method doesn't update the progress bar timeline, where am I wrong? https://codepen.io/gooogooo/pen/qBvMMza

Here it is https://codepen.io/gooogooo/pen/dyrqqPy?editors=1111 The error I said is on the Codepen too: Orignal topic The problem comes from this line console.log(tween.progress()) Any idea?

Hi, I'm trying the quoted code. function progressBarUpdate(tween) { console.log(tween.progress()) } const tl = gsap.timeline({ delay: 1, onUpdate: progressBarUpdate, }); tl .add(animate()) .add(reveal(), 'reveal') .add(start()) The timeline itself works perfectly. I just added onUpdate: progressBarUpdate and the function, and I get this error: The problem comes from this line console.log(tween.progress()) Any idea?

Hi I'm using GSAP with BarbaJS 2. I have this code function blue() { let tl = gsap.timeline() .to(".blue", {scale:2}) return tl } function pink() { let tl = gsap.timeline() .to(".pink", {rotation:360}) return tl } const master = gsap.timeline() master .call(blue, []) .call(pink, []) I'm trying to use call function in place of add but the 2 timelines start at the same time, not chaining. What could be the problem here? I read to use call when we need to pass arguments, is it true? Or we simply could use.add(blue(args)) ?

But I don't want in any way GSAP to animate the properties of the class I add! I just want to add a class for other reasons not related to the GSAP animation

This doesn't work anymore in GSAP v3 TweenLite.to(".green", 2, {className:"-=open"}) What's the alternative? I need to do this: gsap.timeline() .to(document.documentElement, 0, {className:"-=class-1"}) .to(el2, { translateY: '0', duration: 1.2, }) .to(document.documentElement, 0, {className:"-=class-2"})

Thanks for the advice. However, I must point out that this solution also gives the previous error: for very wide viewports the image does not enter from the side but appears after a while. Right now I am trying with Google Chrome on a 4500px viewport. I hope this will help you. https://codepen.io/Federico-Manfredi/pen/BaGMOEy

@mvaneijgen thanks for your improvement! I'm having hard times adding a separate animation at the end of one cycle. Check my previous post. Have you a suggestion?

Hi, I've created an infinite marquee of images, it seems to work pretty well, but for large screen (for example I'm trying on screen greater than 4000px) the image that enter the screen doesn't appear in the same moment that enter the screen but after a little bit. I don't get where I'm wrong, any helps? https://codepen.io/Federico-Manfredi/pen/ZEmmQKv

Yeah! It helped a lot. What means the last gapTime .set(boomWords.words, { autoAlpha: 0, stagger: gapTime }, gapTime); // <====THIS What if I had to add another animation after? Like this // Previous code, then: tl.set('.last-boom-word', { autoAlpha: 1, scale: 1.2, repeat: 3, }) It doesn't start. Here too I don't want any transition (if I use .to in place of .set it works)

Here my code: https://codepen.io/gooogooo/pen/poQxqxL I need to hide a word at the end of its tween. I have to show one word per time. Word 1 appears and stays for 1s, then it disappears and Word 2 appears and stays for 1s, and so on. Without any transition between them. Is there a way? Maybe my approach is wrong? Thanks

@mikel thanks, I understand but applying a letter-spacing I get too much space between the chars. I can't use this solution. Any other ideas?

Hi, check the below Codepen on Safari (desktop and mobile) and look at the "f" characters: you'll see that they're cut off until the animation ends (I just took the SplitText demo to make it more clear) causing a bad jump making it buggy. Is this maybe a Gsap bug? Any way to solve it? Thanks https://codepen.io/gooogooo/pen/VwrgMJR

Hi @Cassie I wanted to keep this question as simple as possibile. animateTitle function was just an example, it contains just a very simple gsap.from() tween like a fade in. It is a function that I have to use also in other contexts, like calling it outside a timeline. export const animateTitle = (element) => { gsap.from(element, {...}); // Fade in animation on the passed element }