Islam Ibrakhimzhanov

Thank you, indeed, you solved three of my problems at once with one answer) Now I can say: Happy Tweening! ?

Hello everyone and happy holidays I have two questions: The first one is: I have two horizontal sliders and I want all the sliders to stop working and become vertical elements when the size is less than 1024 pixels. I looked through a couple of questions about this and saw that some of them are already outdated, since a couple of things have changed in Gsap 3, and I couldn't figure out the others. Please tell me how to resize to disable the animation as described in the documentation and re-run it at the desired window size? Second: I have recently started learning Gsap and it seems to me all the time that I am doing the animation wrong, please review my code and let me know where to fix it. I will be very grateful for any idea. P.s Sorry, I couldn't make you a demo version on codepen because I work at vue and have already broken the project into small parts. import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); let ww = window.innerWidth; let sections = gsap.utils.toArray(".panel"); let container = document.querySelector(".wrap"); function mainPage() { tl.to(".boxes", { duration: 5, ease: "none", x: -ww, repeat: -1, }); console.log(">>>>>One<<<<<"); gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: 1, snap: 1 / (sections.length - 1), invalidateOnRefresh: true, end: () => "+=" + container.offsetWidth, }, }); //! Two let customContainer = document.querySelector(".customContainer"); gsap.to(customContainer, { x: () => -(customContainer.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", duration: 4, scrollTrigger: { // markers: true, trigger: ".trigger", invalidateOnRefresh: true, pin: true, scrub: 1, // snap: 1, end: () => "+=" + customContainer.offsetWidth, }, }); } document.addEventListener("DOMContentLoaded", adaptive); window.addEventListener("resize", function () { adaptive(); ScrollTrigger.refresh(); }); function adaptive() { return window.innerWidth > 1024 ? mainPage() : console.log("TWO"); }

Thanks a lot, this is what I need. To all the good who helped thanks, Cassie and thank you very much.

Hi, Rodrigo Thank you for taking the time to describe the problem, but since I'm new and have only been here for a few weeks, I didn't understand anything except that you wrote that you need to do everything in one instance of Gsap. I've watched the video you sent me from Cassie more than once, but unfortunately I didn't understand it either. Due to the fact that you didn't understand, I just need Chevrolet to stop at the beginning of the next section after the word, or Chevrolet to scroll through without binding, and everyone else has already scrolled through one section. Because of this logic, I actually created two Gsap instances in the hope that I would be doing two different things. To make it even clearer, I overwritten my code: https://codepen.io/ibrakhimzhanov/pen/ZERLJZw, but as you can see, there is an empty space after the word Chevrolet, I don't understand why:( I did from this example:https://codepen.io/GreenSock/pen/YzygYvM

Yes, we misunderstood each other, but I think it's my fault, I couldn't formulate the question clearly. I need an exact copy of the work from the site https://karinasirqueira.com/projects/mailchimp / because I have the inscription Chevrolet because the card and the card are both on her website.

People, I looked for solutions, and slightly altered the code, now it looks like this: https://codepen.io/ibrakhimzhanov/pen/bGKBYEN There is one problem left?, when scrolling, it is necessary to salt to the second element of the el class, that is, the scroll should stop as soon as the word Chevrolet ends. I created two methods with gsap.to() but for some reason it works clumsily. I will be glad if you guide me on the right path.

Hi, I need to execute exactly the same logic as on this site -> https://karinasirqueira.com/projects/mailchimp

Работаю вторую неделю, помогите ребята. Мне нужно сделать горизонтальную прокрутку для всего раздела. Пример с этого сайта , там тоже используется Gsap, но я не вижу его кода Это должно быть так https://karinasirqueira.com/projects/mailchimp/