Apnw2

Can't wait to see it ?

Thank your for your answer @akapowl ? But honestly I don't really like the answer (?) because it makes me pretty confused on how to properly solve different problems such as for example : In having a master timeline, we could easily keep track of it and for example kill it to recompute it on window resizing or on navigating through different pages. How to do such a thing if multiple ScrollTriggers are defined at multiple places in the code ? If some timelines share exactly the same ScrollTrigger part except that they have different scrub values or end values for example, I thought that we could avoid redefining the shared ScrollTrigger definition in having it placed in a common parent timeline. As it is not a good practice, is there a good one to avoid code duplication ? Thank's a lot for your patience PS: I don't know if it could be relevant but I'm using Vue.js

let master_timeline = gsap.timeline(); create_animation(); function create_animation(){ master_timeline.add("start") .add(create_scrolltriggered_animation(), "start") .add(create_other_subpart_animation(), "start") .add(...); } function create_scrolltriggered_animation() { let res = gsap.timeline({scrollTrigger: {scrub: true, ...}}); res.add("start") .add(create_scrolltriggered_animation_part_one(), "start") .add(create_scrolltriggered_animation_part_two(), "start"); return res } function create_scrolltriggered_animation_part_one() { let res = gsap.timeline(); res.add("start") .to(target, {...}, "start") .fromTo(other_target, {...}, {...} , "start"); return res } function create_scrolltriggered_animation_part_two() { // Very similar to part_one but for other targets } function create_other_subpart_animation() { // Very similar to "create_scrolltriggered_animation" but with no scrollTrigger } Hello, I'm trying to figure what is the best practice to combine timelines and scrollTrigger in a modular and clean way but I don't find any answer. The following code extract corresponds to the standard way I'm trying to create Timelines, which works great with no scrolltrigger. But, in this code, ..._part_one and ..._part_two are played immediately and not controlled by the scrolltrigger defined in the function "create_scrolltriggered_animation". So what is the best way to adapt this and make ..._part_one and ..._part_two be controlled by the scrolltrigger in the parent timeline ?

Good to know, I would be glad to join it when it financially will be more a possibility for me ?

Wow ! Wow ! Wow ! I'm so amazed by so many things ??? I mean: The quality of your answer @akapowl and the fact it's so detailed, relevant, well explained, and even points out and links to the very elements I was missing. I have so much more to learn. The power of GSAP in general, it's so well thought, engineered, developped and documented. The help this forum gives and the possibility to always have a useful answer for every problem. I will never be thankful enough for all of this

Hello all, I'm having difficulties on a ScrollTrigger animation in which I want to add a "delay" between different parts. The problem is that during that delay between tweens, elements are not pinned and are scrolling which is not the effect I'm searching. I don't know what is the best way to keep pinning these elements during this delay. I made a CodePen with my animation to better understanding. The animation I would like to obtain is while scrolling is the following: 1) the letter "A" appearing from the center of the screen at scale 0 to scale 1 2) the letter "A stay pinned at the center during a "delay 1" time (no tween here) 3) the letter "A" going from scale 1 to scale 10 while disappearing and being pinned at the center of the screen 4) Nothing during a "delay 2" time 5) Then the same steps for the letter "B" In the CodePen, "delay 1" = "delay 2" for simplicity. I could be so grateful if someone could help me on this problem. Thanks a lot

It works, that's it. Thank you ?

Hello, I'm trying to create a parallax effect. On the CodePen I set the background by two means : the first one in HTML with src attr of img doesn't work. But as soon as i remove this src attr and set the image in JS using backgroundImage, it works. As in reality I'm trying to reproduce this effect with a background video (source tag inside a video tag instead of img tag), as far as I know I can't set the video url using JS and I'm obliged to use the src attr of source tag so the effect doesn't work. I don't understand why it doesn't work using src. So is there a way to do this effect with a video ? Thank's in advance

Hello, I have exactly the same problem but I'm wondering what is the solution. I'm trying to implement a horizontal scroll very similar to this official demo. It works fine when I put the markers but stop working when I remove it. If a CodePen seems useful I could try to provide it. In the demo there is height: 100vh; So where is the space necessary to scroll in there ? Thanks to enlighten me.

It works PER-FECT-LY ! ? I'm SO grateful to both of you. I'm amazed by how powerful GSAP is and how helpful this forum is. It has made my week ?

Thank's a lot @akapowl. As @OSUblake pointed out, offsetLeft/ offsetTop was much more difficult because of parents positioning. I discovered the Flip plugin in the thread you joined, and especially its fit() function. I was so amazed because it's doing exactly what I want but in a simplier way. But now it creates me another problem ?. I tried a Flip.fit() which is working and doing exactly the move that I want when I give it a duration. But as soon as I try to give it a scrollTrigger with scrub: true instead of the duration parameter, it stops functioning. I found a topic (here) where Flip and ScrollTrigger work together but I think the difference is because it uses Flip.to() instead of Flip.fit() in my case. Moreover, in this other post (here), I'm not sure to understand well but it seems that in any case the animation would be broken on window resizing as in my first problem. I create a new Codepen to illustrate the problem, in this, if we comment the second Flip.fit(), the blue rectangle is at its initial position (center of the screen), but if we uncomment it, it jumps instantly to the end position (top left) without any ScrollTrigger scrub. Thank's for your patience.

Hello @OSUblake, thank's for your answer. I was really enthusiast when I read it since it looked like the answer, but unfortunately so disappointed when I saw it doesn't work on field. I think that's because getBoundingClientRect gives me the value with transform at each time. So maybe because the use of invalidateOnRefresh is not the one we wait. An other hypothesis could be that my start and end objects are in fact SVG paths so maybe it messes up

Hello, I'm trying to move an object (whith position and size function of the window size) to a certain point and size using ScrollTrigger scrub. The problem is that when I resize the window during the scroll, all the timeline is not valid any more because the new move is computed with the current position of the object instead of its initial position. I don't know how to get the position independtely of the properties modified by GSAP. I tried to make a codepen to illustrate my problem, but I'm not sure it works well, the goal here is to move the green rectangle on the middle of the screen to the position and size of the one on the top left. Thank's a lot for your help

Thanks for your answer, In fact, I was thinking to make a calculation similar as the one in your second codepen example, but the problem I'm coming with in this topic is that the animation in my codepen is not smooth and jumps pixel by pixel.

Hello, I'm trying to fill a circle from the outside to the inside and scale it. We can see on the codepen that it works approximately, but the filling thanks to the border-width attribute is not smooth and kind of jumps, whereas the scale works perfectly smooth. The end goal would be to cover entirely the screen in blue, so if another method is more appropriate I'm open. Thanks in advance, Max

Oh yes, that's exactly it ! Thank's a lot for such a fast answer and sorry for this stupid question, I thought the answer would be a lot more difficult.

Hello, I'm quite new to GSAP world and trying to learn it. All the examples of the docs and this forum are an incredibly helpful thing ! I'm currently trying a little ScrollTrigger animation but can't manage to make it work on my own. On the attached Codepen, my goal is to make the blue square grow progressively from scale 1 to scale 4 when scrolling down the 100px between the start and the end of the animation, and reverting from scale 4 to scale 1 progressively when scrolling up the 100px from the end to the start of the animation. On the Codepen, as you see, the blue square will grow all at once when the animation starts and won't revert when scrolling up to the beginning of the animation. Thank's for your help and sorry if the solution is evident.

Hello, I'm struggling to morphing an absolute svg to a fixed one. In my Codepen example I would like the letter "o" in the center of the screen becoming progressively the blue circle in the header but it doesn't work. Some help will be super helpful. Thank's a lot.