didkumi

Hi @Rodrigo Thank you for taking time to fiddle around with the demos. On Mitchel's demo, if you have the cursor on the pink container and try to scroll, it won't scroll because it's fixed. Also, when you scroll (while having the cursor on the right grey container), the trigger marker does not scroll up with the top of the grey box but just remains fixed... which I guess means the scroll trigger is not correctly hooked up or is disconnected when pinType is set to 'fixed'.

Hello @mvaneijgen Thanks for your response. I also thought setting the pinType to "fixed" would solve the issue but then another problem (evident in your demo as well) arises: trigger marker is no longer triggered to the assigned container (fixed like scroller) scrolling action does not work when the mouse is over the fixed (pinned) container I could not figure out a workaround for neither of the preceding issues, especially the first since I want to add some animation in the pinned container with the triggers. Would you have an idea of a workaround? Thank you

Hello, Fascinated by the library! but still a long ways to go.. For the first time, I am trying to implement a ScrollTrigger within a full page modal. (setting the scroller to the modal) When I try to pin a div, it does not stay fixed but jumps around (then eventually sets up at the fixed position) when I scroll faster or even slower. It's not visible everytime, but when you scroll up and down inside the demo, the left (pink) div jumps up and down trying to catch up with the pinned position of the scroller.. I can see the markers move up and down as well because it's pinned to a nested div... Would anyone know what is causing this behaviour and how to solve this? I would really appreciate it.. Thank you https://codepen.io/wonjiky/pen/ExMNPmo

Is this a normal behavior? for anim tween's property to be set before it is called? I expect the initial value to be a value I've set in the dom but during the first scroll enter "#circle2" already has radius which I have no idea how to resolve. I've tried setting a fromTo tween and set immediateRender to false but won't work. I thought I read forums saying gsap will always try to start from an initially set value.. Can anyone help?

Well noted, thank you for the tip! Didn't know about the util functions.

Hi, thank you for answering. As for the codepen example, the blue circle is supposed to become smaller in size with the red circle. The problem is half resolved, by adding a position mark ("<") to all the tweens after the first tween it forces all the elements to tween at once per scrollTrigger... But as you mentioned, the unsolved issue is that now I don't have the option to start the tweens at different positions or else it will start collapsing like above. I don't think scrub could be an option for me as I cannot let the users see the in between states of the value based elements. My plan is to have text scrolling on the left (the A,B,C in the demo) scroll triggering the elements in a pinned SVG container. I hope I've explained myself better. So would an alternative from using callbacks you say is a scenario where I create separate timeline of tweens triggered by each text container..? So something like below..? const TL_1 = gsap.timelines({ scrollTrigger: { trigger: "div1" } }); const TL_2 = gsap.timelines({ scrollTrigger: { trigger: "div2" } }); TL_1.to().to().to() TL_2.to().to().to() Not quite sure how to tackle the structuring as you say while trying to avoid conflicts. I would really appreciate if you could give me some guidelines.

Hello, Just started using the gsap library and really being amazed by the features. However, I have a couple questions regarding set up and logic on my project. First, as you can see in the demo, scrolling back up slowly animates everything correctly but scrolling back up quickly, the circles don't not fully tween and stays at old states. I've went through some other topics within the forum but could not exactly nail down the problem. I'm assuming it's to do with not having enough duration time but can't really seem to solve the issue. Also, the project is potentially going to grow in size and I was wondering if the set up I currently have is the right way to go... I plan to use d3 functions at some point as well.. Thanks in advance!