Ivan Mocs

Thankssss, my problem has been solved, sorry for bothering you https://codepen.io/adeivan/pen/MWReBVG

Yes, I have seen it, but how do I get the card position to start directly from the first card?

Hello, I have a sliding card like the this https://codepen.io/adeivan/pen/XWqRPrr , but I can't seem to use it in my case, I made a new approach like this https://codepen.io/adeivan/pen/NWmrXwO how to make the animation the same as the previous code? so the new card enters the container > about 50% of the card enters the container > scale down to 0.8 > after the scale down is 100% complete > then opacity to 0

Wow, I didn't expect to be able to do it with such a simple code, thank you.

This is the sliding card I'm referring to https://codepen.io/adeivan/pen/XWqRPrr I tried using this, but the card is not stacked pin: ".panel .section-2", pinType: "fixed",

I have 2 animations, The main animation is a sliding section, and the 2nd animation is a sliding card that is placed inside the sliding section, is it possible to pin the sliding card to the sliding section?

how do I add a delay of about 3 seconds after the page is loaded, I tried adding a 3 second delay in gsap.to but when I scroll it doesn't want any delay I've also tried using a timeout outside of ScrollTrigger.batch with a duration of 500ms, but it makes it only execute half of the elements that will be displayed.

I have a problem when I add Y animation, why is the sliding animation when scrolling not correct? while without the Y animation, the sliding works, I've tried to init when onComplete but that doesn't fix the problem either.

how to drag content with a size larger than the container, if the size of the content is small it is fine, but if the size is large it cannot be dragged.

and this can lead to new problems, such as shifting without knowing the bounds.

yep, like this! but the movement is inverted, when I swipe left, the object moves right, likewise when up, the object moves down, I changed + to - in this code and it seems to fix the mistake const myObserver = Observer.create({ type: "wheel", wheelSpeed: 10, onChange(self) { xTo(getter("x") - self.deltaX); yTo(getter("y") - self.deltaY); } }); a suggestion from me, maybe you can create a new option for draggables like the one at https://ilyashubin.github.io/scrollbooster/ which is emulateScroll Thank you btw

maybe like on this site, can be swiped with a trackpad : https://amie.so/recap

I'm looking for an example of an obeserver with type "wheel" but I don't know how to do it.

how to zoom in & out by scrolling/pinching with finger with gsap, is there any template other than this? thank you.

this is my update code codepen.io/adeivan/pen/JjzBZKy I've tried it, and it works, but how do I get the scrolling on each section to finish before the other section enters? I used pinSpacing: false to get the section stack effect

this is my update code https://codepen.io/adeivan/pen/JjzBZKy codepen.io/adeivan/pen/JjzBZKy I've tried it, and it works, but how do I get the scrolling on each section to finish before the other section enters? I used pinSpacing: false to get the section stack effect

Is it possible to scroll through text in a pinned container?

Yeah you right, adding overflow:hidden will stop the scroll function, but how can I make smoothScroll inside the current div, there I write "THIS IS SCROLLING CONTENT" but I can't scroll it. I can't use the id "#smooth-content" at the same time If I add "#smooth-content" to the popup div that is currently appearing then scroll only works on that div, not on the div below it.

how to move the smoothscroll to another div, I want when clicking the "SHOW MORE DETAIL" button then the smoothscroll is activated on the open div [id="detail-section"], but for the div behind it is stopped. And when the "CLOSE DETAIL" button is clicked then the smoothscroll is active again [id="smooth-content"].

Yep, thanks Horizontal "containerAnimation" - ScrollTrigger (codepen.io) Can horizontal scroll use scrolltrigger? I use scroll trigger to display section name but scrolltrigger seems to start from top to bottom not from left to right? if I create vertical content section name works fine, but for horizontal scroll it only reads 1 section.

Here I have elements with different widths, but I have a problem that the end of the element is not at the edge of the page, how do I make it stop at the edge of the page?

How do I add a delay only on the first page load. I don't want any delay while scrolling. ScrollTrigger.batch(".fadeup-startup", { onEnter: elements => { gsap.from(elements, { autoAlpha: 0, y: 60, stagger: 0.2, delay: 2.3 }); }, once: true });

I'm confused about how to determine the start and height, I want each element that is selected by [data-scroll] to have its own end, I mean when one element exits the viewport first, the transform movement stops. https://codepen.io/adeivan/pen/OJwBomP When viewed from the inspector on the element with data-scroll="0.75", the transform value is still changing even though the position is out of the viewport area. I've tried to set the "end" but when one element exits the viewport, the other element's transform also stops. How to make each element have its own "start" and "end"

its possible to disable the transform that runs outside the viewport? if seen from the inspector when element 1 has out of viewport "transform" is still running, I want it to be paused when out of viewport.

Sorry about that, I'm just trying to learn without using plugins, in the code I only want the scrolltrigger to run outside the class OwnScroller or onLoad() code, therefore I am confused why the scrolltrigger cannot run perfectly like I put the scrolltriger code inside onLoad(). Update : Solution found, thanks in advance