issam.seghir

Thank you, I have another question. If I don't use scrub:true, do I still need to add duration? I only want the animation to work when entering, not when entering back. So, I am using toggleActions instead. However, the end position is the same for all elements. GSAP How to Dynamically Control Animation Durations Using dataset ? (codepen.io)

GSAP How to Dynamically Control Animation Durations Using dataset ? (codepen.io) https://codepen.io/issam_seghir/pen/PoVwoEq

I'm trying to achieve a specific animation behavior using GSAP and ScrollTrigger. I have a list of elements with the data-aos attribute set to various values such as "fade-up" and "fade-down." I want to control the animation duration for each element using the data-speed attribute. const fadedown = gsap.from('[data-aos="fade-up"]', { opacity: 0, y: -50, ease: "power2.inOut", duration: (index, element) => { return element ? element.dataset.speed ?? 1 : 1; }, }); console.log(fadedown.vars.duration); Expected Behavior: fadedown.vars.duration = 1 // or any value in dataset.speed Actual Behavior: fadedown.vars.duration = "(index, element) => element.dataset.speed ?? 1"

If you have a scroll trigger for a 2000px and the following timeline tl.to("...", {duration: 2, ..}) .to("...", {duration: 4, ..}) .to("...", {duration: 6, ..}) .to("...", {duration: 0.01, ..}) .to("...", {duration: 2, ..}) The duration will be calculated in the following manner: all durations : 2 + 4 + 6 + 0.01 + 2 = 14.01 = > 1000px so: duration: 2 => 142.75 px duration: 4 => 285.51 px duration: 6 => 428.26 px duration: 0.01 => 0.71 px duration: 2 => 142.75 px

I have realized that when I pin a section to add animation on scroll, the duration of the timeline corresponds to the distance I scroll until reaching the end. For example, if the end is at 4000px, the duration will be until I scroll to 4000px. However, I would like certain tweens in my timeline to animate for a longer duration compared to others. Unfortunately, when I add durations to my tweens, it seems that the duration doesn't have any effect. All my tweens still have the same duration.

@GreenSock Thank you so much for taking the time to discover and address the issue. You are an amazign team and support 😊 . I was wondering if I could animate the height and width in the next release without any problems ? I understand that it's not recommended to animate these attributes, however, sometimes I need the element to be relative to the container and scaling doesn't help in such situations.

@GreenSock you said : "If your goal is to basically limit the animations from doing much during your scroll, you could just set gsap.ticker.fps(1) (make GSAP update only once per second) during the scroll, and then set it back to 60 (or some higher number) after that. Does that help at all? "

@GreenSock its look better with fps(30) , but i can't back to fps(60); , it still 30 fps always see demo : Gsap Trick FPS when anchor links clicked (codepen.io)

Thank you for your advice, but I've mentioned several times in this question form "NOTE: (don't focus on the height attribute is just an example it can be any CSS attribute)" Why do I say that? I've also mentioned the reason: "The issue occurs frequently with various types of animations.'" I want to clarify that my issue is not related to the height, opacity attribute, or any other attribute used in my example. I have provided multiple examples to help you understand the main problem. on my website, I have several animations with different CSS attributes likebackgroundSize, and I'm only using the to() tween for this particular type of animation In the example, everything appears to be normal with a simple animation. Therefore, I don't believe the issue is related to my CSS or JS code. Instead, I suspect the problem may be from the GSAP part. Regarding the padding in the section, I'm uncertain why its removal seemed to work, but it neither resolves nor explains the problem adequately. Are you suggesting that we should avoid using padding? That seems impossible. To confirm, I've also observed the same peculiar issue in animations without padding in the container. The only notice I can add is that i think the problem seems to arise when using percentage values. It's possible that GSAP encountered difficulties in calculating these percentage values, resulting in the addition of an inline style with a different value ..., what do you think ?

forget about fromTo() and forget about opacity, please don't focus on the animation itself and focus on the main problem; to understand me clearly I cooked this demo, using.to() tween only: Gsap override my CSS (codepen.io) this is a vertical progress bar, the default height of all these bars is: 35% of the container, except for the first one is 100% height It looks something like this: NOTE: (don't focus on the height attribute is just an example it can be any CSS attribute) so the animation works like this: As I scroll to the pinned section, the first bar height decreases from 100% to 35%, simultaneously the second bar height increases from 35% to 100%. tl.to(".progress-bar:nth-child(1)", { duration: 4, height: "35%" }) // from 100% to 35% .to(".progress-bar:nth-child(2)", { duration: 4, height: "100%" }, "<") // from 35% to 100% and the same repeat for the rest of the bars until the end of scrolling: so, the final result its something like this: so, when I open the page and not scrolling yet to start this progress bar animation, what is the expected style to apply to all bars? if you follow what i say the expected style is : " the default height of all these bars is: 35% of the container, except for the first one is 100% height" but when i opened the page and inspected the bars i found something like this :

thank you , but this config is not the main problem , my question is about the tween apply style before even the timeline (animaiton start) and this is happen even in other attributes like height , even if i do fromTo { height: 550px , object-fit:contain ... } , { height: 100%, object-fit:cover , top:0} and in my css : img { position: absolute; width: 100%; height: 550px; object-fit: contain; border-radius: 4rem; max-width: 100%; } my CSS style is being ignored by GSAP. It should be applying the style { height: 550px, object-fit: contain... }, and from style { height: 100%, object-fit: "contain", top: 0 } and apply to style { height: 100%, object-fit:cover , top:0} when I reload the page even the animation doesn't start and even the tween is not its turn to run this is which style applied when i inspect the page I often encounter this issue in various animations and struggle to comprehend what is happening. see also: Gsap : animate object-fit (codepen.io)

I gave the bgSize() helper function a try, but it seems to always cover even when I use the toFrom tween. Unfortunately, this problem has occurred multiple times with other properties as well. Please take a look at the codepen example provided above. this is the output of consol.log when reload the page :

I would like to animate the video by changing the object-fit property from contain to cover. However, the animation is not smooth and there is a noticeable jump. My desired outcome is to have the image container positioned at the bottom of the viewport, then smoothly translate it to the center of the viewport. Once it is centered, I want to scale the container to fit the entire window and then scale it back to its original size of 1. During this scaling process, I also want to adjust the container size to be 100% in terms of both height and width, and set the image object-fit property to cover.

i tried both, preventOverlaps it seems not what I'm looking for, fastscroll had bugs and lags with lenis , without lenis , there was no noticeable change when using this feature. The animation still ran when clicking on a nav link. I even tried adjusting the value to 500px, 3000px, and 8000px, but it didn't produce the desired result.

The problem does not lie with lenis, lenis only improves the smoothness of scrolling, the animation will still running when scrolling takes place (when clicking on navigation links), even if lenis is not present. this problem occurs when using the smooth scrolling option provided by the native settings. Anyway, I'll give the suggested options a shot and see if they fix the problem.