ninmorfeo

I understand so it's something that is less natural than I think. In theory, therefore, the only way would be to pin (fix) the sections below the horizontal one, after having reached the right edge of the same (without relying on the scroll trigger functionality), restore the normal flow by putting all the sections back into relative positions. OK thank you

Sorry, maybe I'm the one who doesn't explain myself well in terms of what I want to do since conceptually it's a very banal thing. In the pen I attached you can see that when i pin section 2 which contains the slides that should have a horizontally scroll, 2 unwanted things happen: first the focus of the scroll does not pass from the window to the section with css properties overflow: auto.... not even if I put overflow:scroll; this means that continuing to scroll with the mouse wheel or scrolling bar continues to scroll the main window instead of scrolling the horizontal section; the second is that the automatic scroll of the horizontal section skips all the slides and positions itself at the last one, but here I am the one who didn't bother to fix it because I can't resolve the first point. In the examples that the other user attached I see that the End property of the scrolltrigger is used with a static value for example end: "+=2500" which I don't understand what it is for since this value should tell the scrolltrigger to finish the animation horizontal when the user scrolls the mouse wheel or the sidebar for another 2500 pixels? why? is it just a fake number to alow to complete horizzontal animation ? in practice this "end" does not refer to the far right of the horizontal div, which I thought the scroll trigger plugin would handle for the sections set as horizontal: true, which instead should be set by default, you have to decide if your site has a vertical or horizontal navigation, i.e. I cannot mix the 2 behaviors.

Well I would like the trigger that scrolls the sections vertically to stop when it finds the trigger of a horizontal section and if you continue to scroll with the mouse wheel they begin to scroll the sections horizontally, which I called slide for convenience, we want to call them tabs but they are divs in all respects equal to the main sections only that they should scroll horizontally in the same way I move between the vertical sections, after which once I reach the far right the normal vertical flow begins again; by scrolling between the vertical sections you can re-propose horizontal sections which should always resume the same behaviour. In practice if I could have simply defined a horizontal:true when presenting these horizontal sections it would have been simple but I saw in the documentation that one excludes the other since the whole window is affected. I also tried this but it doesn't work. Basically in the examples I've seen an End is defined which I can't even understand since it doesn't refer to the right or left edge of the div which starts to scroll horizontally. I currently only use the observe to disable the trigger in case a user uses the vertical scroll bar and re-enable it if they start using the mouse wheel again.

in 3 days I think I saw all the pens on codepen...the best I managed to do is what you see in the pen I attached.however, I had already seen them and they all have only one trigger in common, I have not found examples of triggers that iterate with each other. IN practice they all have a section that breaks the triggers, while I have sections that use both in theory

Hi everyone, I've been losing my mind for 3 days, I still haven't found the solution, I've done dozens and dozens of tests and come up with dozens and dozens of examples but nothing, what I attach is what I managed to do that comes closest to the result I would like to achieve. In practice I have a scrollTrigger that is activated for the primary vertical sections and one that should be activated for the horizontal ones and I would like it to happen via the mouse scroll (therefore without using the sidebar which I control in a different way, with observe, so in case you do some tests do not use sidebar). What I see is that even if the horizontal section has been pinned, the vertical section trigger continues to scroll the page (probably it should be paused until the far right of the slides is reached, but I haven't found any directives to accomplish this task). I would like once the scrolling of the horizontal section ends that the normal vertical trigger will start again. In reality I didn't even understand the end of the trigger of the horizontal section, what is it for since I thought it referred to the total width of the slides but this is not the case because the scroll trigger if it is not defined as horizontal: true does not accept even the left and right... I'm stuck and I'm about to give up. My question is simple: how the hell do you do it? I hope the answer is as simple and I'm simply missing something.

it's work fine with html { scroll-behavior: auto !important; } thanks

Sorry, I corrected my site address in the post. Anyway, if you look at the pen it works correctly on firefox but not in chrome. If you move to the last slide and try to go back up, you don't have the same behavior as when you scroll from the first to the last slide, i.e. stopping the animation at each slide.

Maybe the logic of the scroll trigger is not well understood, maybe if someone helps me solve this problem it can be clearer to me. I created this demo, scrolling down works as it should, but it's work fin on firefox but non in chrome... look it on my test site: https://staging2.eyeart-agency.it/eyeart-agency-homepage-simple/ pasted pin here but it's work fine in codepen and not here, if you scroll up from last slide, always in chrome...

I'm creating a card game that you can view at this address: https://www.staging9.casadeicartomanti.it/tarocchi-gratis-online/lettura-gratuita-dei-tarocchi-si-o-no/ There is one thing that is driving me crazy and I can't figure out why this is happening. after I drop a card, I clone it and perform a function which is identical for both the original and the cloned card, but when I start the animation the card go to different places.. At the address I indicated you can try it: after shuffling the cards and dragging and dropping them in the indicated area, 2 buttons will appear: one clones the card with the same css characteristics (you can see it in the chrome console) while the the other button starts the animation which should place the cards in the center of the screen, but as you can see the cloned card is offset. In the inspector I noticed that while a transform3d css is performed on the original card, a transform is performed on the cloned one... Do you have any idea why it behaves like this?

oh ok, thanks...now it work

I wanted to ask, does gsap take into account the transform-origin property when I place an object with the property X ? I'm trying to position the box you see in the image with gsap.set, setting the X property to 0, but I see that by changing the transfer-origin parameter in the css I don't get the results I expect as I show in the image, but it always remains as if the transfer-origin property were set to 0,0

ok thanks, its work

I use this other example, I think it's more understandable: .staggerTo(chi, 0.5, { x: '+=50', ease: Power4.easeOut }, 1, "-=2.2"); the parameter "-=2.2" let me start stagger animation 2.2 second before the end of previous chained animation on timeline. How i can have the same result with v3 ?

Hi, I haven't used gsap for some time and I am now with the new version. I need to convert the old functions but I'm having some problems. For example, how do I convert the following timeline function? .staggerTo(chi, 1.5, { x: '-=70', rotationY: 180, rotationX: -10, boxShadow: '20px 20px 15px 0px rgba(0,0,0,0.1)', ease: Power4.easeOut }, 0.05) I tried to convert it with the following code but the starting parameter (0.05) of the stagger gives me some problems, I guess it doesn't go where I wrote it... .to(chi, { x: '-=70', rotationY: 180, rotationX: -10, boxShadow: '20px 20px 15px 0px rgba(0,0,0,0.1)', ease: Power4.easeOut, stagger: { each: 1.5 } },0.05)

It works! thanks a lot

hi thanks for reply. The problem in not on positioning object at start. I know i can do in a couple of way. The problem is on animation... why, if i give end coordinates like : x: larghezza_browser/2, where larghezza_browser is window.innerWidth the card is not be placed at center of window? again, it'seem that the transform point of the card is placed upper left and not in middle.

I can't get an object to place in the center of the screen. If you look at the picture you can see how the cards are placed translate to the right of the red line. When I created the cards I tried to place the transformation point but it doesn't seem to work. First i create card with this code: $('.drag_zone').append('<div id="' + chi + '" class="carta_estratta' + ' ' + classe + '"></div>'); gsap.set($("#" + chi), { background: 'url(' + sfondo + ') no-repeat center center', rotationX: 20, rotationY: 0, rotationZ: 0, opacity: 1, transformOrigin: "center center", transform: "translate(-90px, -176px)", boxShadow: 'rgba(0,0,0,0.75) -2px 2px 5px 0px ', zIndex: 100 + (10 * zindex_pos++) }); where 90px is the half width card and 176px is half height card. then i animate with this code: a_c_i = gsap.timeline(); a_c_i.to(chi, { duration: 1, x: larghezza_browser/2, ease: Power4.easeIn, }, "-=0.8") .to(chi, { duration: 0.7, y: function (index) { new_y = (altezza_browser / 2) - ((index) * 0.8); return new_y; }, scale: 0.6 }, "-=0.8"); } where am i wrong? it is as if it always calculated the animations from the 0,0 point of the card and not from the center.

no jack, the first example was correct...anyway i found solution by reorder object array. thanks anyway

thanks a lot! but it can be a idea for next releases ?

hi every one! is there a way to run the stagger not with step of 1 but step of N? I'll explain: currently if I have 10 elements to which I have modified the final value of the X position of 20 pixels through a function that returns me +20 and -20, the stagger method animates the elements according to this scheme: ele [0] = +20 ele [1] = -20 ele [2] = +20 ele [3] = -20 ele [4] = +20 ele [5] = -20 ele [6] = +20 ele [7] = -20 ele [8] = +20 ele [9] = -20 how can I do this type of animation instead? ele [0] = +20 ele [5] = -20 ele [1] = +20 ele [6] = -20 ele [2] = +20 ele [7] = -20 ele [3] = +20 ele [8] = -20 ele [4] = +20 ele [9] = -20 in practice there is a way to define a step on the animation objects? not more every 1 but every 5... gsap.to(chi, { duration: .3, stagger: { amount: 2, }, x: gsap.utils.wrap(["+=20", "-=20"]), })

yes what you say is used to align the object with respect to the cards that have the translate set to 50%. I was referring instead to the animation that from scale 0.8 had to become 1. I saw that if I use scale: 1, the animation does not start, if instead I separate them with scaleX and scaleY it works correctly.

ok working with scaleX and ScaleY ...thanks a lot boss!

ok I understand my issue about transformations. How should I behave with the scale instead? use scaleX and scaleY instead of generic scale? because if you have noticed, in the code if I set the scale to 1 instead of 0.8 which is the one set by the transformation, the animation does not start

https://codepen.io/Ninmorfeo/pen/eYmxYey another issue...i think so: in this codepen if you try to use scale in gsap.to after performing transform clone, animation won't start... you can see in last function at line 144