jenda

Hello, a question. How could I automatically add bullet points and link them to the right slide? I would like to use the bullet points as a navigation.

Hello, unfortunatelly, we have a problem with playing videos that dynamically change their height althought they have a height value from the begining so that this GSAP animation change its start constantly. Is there a trick to avoid this behaviour?

Thank you very much. Hopefully the last question: is it possible to influnce the velocity/speed of scrub on the mobile devices? At the moment, I use scrub: 2 but the scroll speed is too fast still so I would like to have it more natural when I vertically scroll. All divs horizontally scroll by -100%.

Thank you. But how can I call it outside of my function where I define the Draggable part? At the moment, I could do it for the ScrollTrigger like this. Unfortunatelly, I cannot assing any ID to the Draggable part I defined. Otherwise I could use the same logic like for the ScrollTrigger. Is there any possibility to call the Draggable variation out of the function? Here is my function with the trigger link. $(function() { $('a[data-side-story]').click(function (event) { event.preventDefault(); if (this.hash !== "") { var hashSideStory = this.hash; $(hashSideStory).addClass('active'); $(hashSideStory).parents('.side-story-container').addClass('open-side-story'); var clickedId = $(this).attr('data-id'); var parentId = $(this).attr('data-parent-id'); //console.log(parentId); let cleanSideStoryId = hashSideStory.replace('#', ''); openSideStory(cleanSideStoryId); } }); $('.side-story-trigger-close').click(function (event) { event.preventDefault(); let triggerId = $(this).closest('.side-story-box').attr('id') //console.log("id zum entfernen: " + triggerId); ScrollTrigger.getById(triggerId).kill(true); gsap.set('#'+triggerId, {clearProps: true}); //Draggable.getById(triggerId).kill(true); $('.side-story-box').removeClass('active'); $('.side-story-box').parents('.side-story-container').removeClass('open-side-story'); }); }); function openSideStory(cleanSideStoryId) { let mainContainer = "#"+cleanSideStoryId let containerInside = cleanSideStoryId + "-wrapper" let containerInsideId = document.getElementById(containerInside) let containerInsideWidth = document.getElementById(containerInside).offsetWidth let triggerButton = document.querySelector('.side-story-box.active .side-story-trigger-close') //console.log(triggerButton); let elementSelector = mainContainer + "-wrapper > div" let contentDivs = gsap.utils.toArray(elementSelector) let offsetValue = 0 let scrubValue = 2 if(window.innerWidth >= 800){ offsetValue = 1 scrubValue = 2 } else if (window.innerWidth >= 1280) { offsetValue = 2 } let contentDivsWidth = 0 contentDivs.forEach(e => { contentDivsWidth += e.offsetWidth } ); //console.log(containerInsideWidth); //console.log(contentDivsWidth); //console.log(containerInsideWidth < contentDivsWidth); if (containerInsideWidth > contentDivsWidth) { // do nothing } else { let scrollTween = gsap.to(contentDivs, { xPercent: -100 * (contentDivs.length - offsetValue), ease: "none" }); let horizontalScroll = ScrollTrigger.create({ animation: scrollTween, trigger: mainContainer, id: cleanSideStoryId, start: "top 20", end: () => { return `${100 * contentDivs.length}` }, // "+=3000" () => "+=" + contentDivs.offsetWidth scrub: scrubValue, pin: true, onLeave: function() { triggerButton.addEventListener("click", (e) => { triggerButton.click(); }); }, }); // total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. var dragRatio = containerInsideWidth / (window.innerWidth * (contentDivs.length - 1)); var drag = Draggable.create(".side-story-proxy", { trigger: mainContainer, type: "x", onPress() { this.startScroll = horizontalScroll.scroll(); }, onDrag() { horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * dragRatio); // if you don't want it to lag at all while dragging (due to the 1-second scrub), uncomment the next line: //horizontalScroll.getTween().progress(1); } })[0]; } };

At the end, it works. Thank you. My last question. How can I stop/kill the ScrollTrigger which I have in a function - the ScrollTrigger is as let with name horizontalScroll. I mean I would like to kill it out of the function with a click event.

Thank you very much. Unfortunately, in my case, if I grab it with my mouse and drag it to move it I jump to the top of the page. Is it a common mistake of newbies like me? :)

thank you very much. Is it possible to check the width of the all scrolled divs? In my case, the pinned container has the same width like the main window (css width: 100%). So there is no difference that's why I cannot work with offsetWidthfor the pinned container. Instead of this, I need to get the width of the scrolled divs. My question is: how can I calculate it? In my ScrollTrigger, I use the calculate function to define the end of the animation end: () => { return `+=300 + ${100 * contentDivs.length}`},. If I understand it right something similar I could use to get the width of all scrolling div, right? Thank you for your patience. let mainContainer = contentId var elementSelector = contentId + "-wrapper > div" var contentDivs = gsap.utils.toArray(elementSelector) let offsetValue = 0 let scrubValue = 2 if(window.innerWidth >= 800){ offsetValue = 1 scrubValue = 0.4 } else if (window.innerWidth >= 1280) { offsetValue = 2 } let scrollTween = gsap.to(contentDivs, { xPercent: -100 * (contentDivs.length - offsetValue), ease: "none" }); let horizontalScroll = ScrollTrigger.create({ animation: scrollTween, trigger: mainContainer, end: () => { return `+=300 + ${100 * contentDivs.length}` }, // "+=3000" () => "+=" + contentDivs.offsetWidth scrub: scrubValue, pin: true, onComplete: function() { document.querySelector('.side-story-container').classList.remove('open-side-story'); document.querySelector('.side-story-box').classList.remove('active'); //ScrollTrigger.kill(); gsap.set(parentContainerId, {position: "static"}); }, }); // total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. var dragRatio = mainContainer.offsetWidth / (window.innerWidth * (contentDivs.length - 1)); var drag = Draggable.create(".proxy", { trigger: mainContainer, type: "x", onPress() { this.startScroll = horizontalScroll.scroll(); }, onDrag() { horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * dragRatio); // if you don't want it to lag at all while dragging (due to the 1-second scrub), uncomment the next line: //horizontalScroll.getTween().progress(1); } })[0];

Antoher question. Is it possible to activate the draggen gestures for mobile diveces to able this scrolling possibility too?

Ok. Thank you. Another question. Can I check if it's necessary to scroll the content divs as long as all of them are in the viewport?

Here is the current CodePen https://codepen.io/jankout/pen/BaZNNQw

Unfortunately, it doesn’t work because the ofsetWidth is undefined then - if I use it without +=3000.

Hello, my code works but only one thing I need to improve - at the moment, the animation ends with end: "+=3000" altough when I scroll to the last div the main container stops to by pinned correctly earlier but its padding-bottom value is still too big so it takes time to reach the following element (especialy in the mobile version). I can understand that the end value influences the padding-bottom value. That's why I would like to calculate the horizontal scrolling area to get the right value for the end value Could anybody help me with this part, please? function openSideStory2(clickedId, parentId) { var contentId = '#'+clickedId; var parentContainerId = '#'+parentId; let mainContainer = contentId var elementSelector = contentId + "-wrapper > div"; var contentDivs = gsap.utils.toArray(elementSelector); gsap.to(contentDivs, { xPercent: -100 * (contentDivs.length - 1), ease: "none", scrollTrigger: { trigger: '#side-story-container-11530', end: "+=3000" , // "+=3000", () => "+=" + contentDivs.offsetWidth endTrigger: 'elementSelector:last-child', scrub: 0.4, pin: true, onComplete: function() { document.querySelector('.side-story-container').classList.remove('open-side-story'); document.querySelector('.side-story-box').classList.remove('active'); gsap.set(parentContainerId, {position: "static"}); }, } }); };

Another question - is it necessary that the scrolled part is absolute positioned?

My colleague made this. It seems to be the right solution. What do you think? https://codepen.io/tarun-uwe/pen/mdBRMQy

well, I got stuck. I tried to do it with the timeline but obviously I cannot understand the logic as well. I guess I have to do a loop for each of the odd and even element? https://codepen.io/jankout/pen/GRMjLqJ