renny

i have alrady try with add some value and another class, but not get exact result as per my video post can you check my codepen and try with some your logic ? Because im almost there to get result Thanks Renny

dont' worry i have sorted my self

yes exactly, that is last image from list and after last image load and fit screen need to unpin

it's too simple when "We are a leading video" section start i need to stop trigger on above image load into full screen and this si not a adjust demo, i just want to some way how to solve this issue Thanks Renny

just tell me how to stop stigger if this last image are display in full screen https://codepen.io/solace-digital/pen/GRxpQOM

thanks you so much for this solution finally i get same result Last one can you help me sortout issue into my projects ? i update your code into my code file and something happen there or i think that code are conflict Thanks Renny

Thanks for your solution but i think it's wrong, basically when first image fit to screen then it's pin and second image scroll up into first image check video i add in topic Thanks Renny

i put another image on there, but not work can you pelase check that ? Thanks Renny

thanks for this solution But how to second image load as per video ? Thanks Renny

i have post minimal demo now can you please help to get this result Thanks Renny

i need a help to video scale as per below example

i need to create animation like below.

i need to animate text like below

thank you very much just last one how to add another section after close this animation same like intitmedui

https://www.untitledui.com/ i need to create this type of scroll animation (top right hero banner)

i need to change image animation like below example https://principle.app/share?id=YxmgCK33VuLRib53FFEc

https://codepen.io/akapowl/pen/OJWRpNm/72a03c1bf7ebcc15bffd94a75d7e213f i found this one and im almost my result, just help me to change image as per my requrment https://principle.app/share?id=YxmgCK33VuLRib53FFEc

i know it's very close, but i need same result as per example. So help me for that

so can you show me any demo something like that, so i will follow that

i found this solution but can't get same result as per my requrment, please check below link for refereance and i need to get result that https://principle.app/share?id=YxmgCK33VuLRib53FFEc

thank you very much finally i sorted

basically that code running more then 3 pages, but about-us page there are no that animation. So how to bypass that code if that class and id not available

"(max-width: 767px)": function() { let sections = document.querySelectorAll(".activities_sec .image"); let scrollContainer = document.querySelector(".activities_sec"); let scrollTween = gsap.to(sections, { xPercent: -110 * (sections.length - 1), ease: "none" }); let horizontalScroll = ScrollTrigger.create({ animation: scrollTween, trigger: scrollContainer, pin: true, scrub: 1, end: "+=1000" }); // 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 = scrollContainer.offsetWidth / (window.innerWidth * (sections.length - 1)); var drag = Draggable.create(".proxy", { trigger: scrollContainer, type: "x", onPress() { this.startScroll = horizontalScroll.scroll(); }, onDrag() { horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * 1); // 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]; }, if i remove this script then all animation working perfectly

this condition is not a right solution, because that animation will use into many pages