Mauro.ie31

Hello there, I developed my website using ScrollTrigger with Horizontall Scrool As you can see there is an ease scrolling (when reaching the end of the website it's necessary to scroll with more intensity respect of the beginning of the website). This is my code : const sections = gsap.utils.toArray(".panel"); let maxWidth = 0; let index = 0; const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); }; var masterScrollTrigger = gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, //ease: "Power0.inOut", ease:"Linear.easeNone", scrollTrigger: { trigger: ".container-scroll", pin: true, scrub: 1, end: () => `+=${maxWidth}`, invalidateOnRefresh: true } }); Question is: How do I remove the ease effect and make the scroll "linear" at the start of the website and at the end? Thanks

I actually solved by using npm instal gsap.bonus.tgz. It's actually pretty hard to know. I try to delete my package json and install the packages from beginning. I don't know. Hope it doesn't happen again

Hi there, I created the .npmrc file in my root project. After I upgrade to nodejs v. 14 and reinstalled my pacjage I ave trouble to install gsap/shockingly: I get this error: npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz - You must be logged in to install/publish packages. npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\me\AppData\Local\npm-cache\_logs\2021-02-25T11_44_49_017Z-debug.log

Solved with this:

I'm unsing ScrollToPlugin. So I have a timeline with different labels. Is it possible to scroll to the actual label position?? I set up a method: timelinePlanets is my timeline. function scrollToLabel(labelName){ const pos = Math.ceil(document.body.scrollHeight * (timeLinePlanets.labels[labelName] / timeLinePlanets.duration()) ) TweenMax.to(window, { duration: 2, scrollTo: pos, ease: 'power1.inOut' }) }

Hello everyone, I have have a timeline controlled with ScrollTrigger and inside I have some labels. So I have some methods that do a tweenFromTo from one label to another, but then of course If I start scrolling again I restart from the last ScrollTrigger progress. Is it possible to update the scrollTrigger progress value to the actual timeline time that occurs at the end of tweenFromTo? Recap: I have a timeline. Timeline is controlled with ScrollTrigger. Timeline has 3 different labels (label1, label2, label3). If i do timeline.tweenFromTo("label1", "label2") everything is fine. But then if I restart scrolling i restart from the last ScrollTrigger progress value. Is it possible to update the timeline.ScrollTrigger value so If i Scroll I start from the end of timeline.tweenFromTo("label1", "label2")? Thanks

Hi everyone, I'm trying to import plugin Split Text in my React Gatsby Application. So I installed gsap via npm and I don't have problems with other plugins but I really can't register SplitText. I'm trying to import as this: import { gsap } from "gsap"; import { SplitText } from "gsap/SplitText"; But i'm getting this error: 'Can't resolve 'gsap/SplitText' If you're trying to use a package make sure that 'gsap/SplitText' is installed. I've really lost lot of time. Thanks

https://codepen.io/mauroie31/pen/xxEvMoG I modify a previous codepen to recreate the effect. Thanks for your help

Hello, I'm trying to replicate the text animation on element with class "cb-tophead-title" from Cuberto. https://cuberto.com/services/digital/ Any way to achieve that? Thanks for helping.

If it necessary I'll open a new topic. But is it possible to have a drag scroll ( horizontall drag specifically) that works with horizontal scroll trigger?

You are really great. Thanks for your help

Sorry agait, but what you intend for "real native horizontal scrolling"? Thanks

I'm sorry but it doesn't work. I have seven section with different width. For example: - Section 1 has 500vw, - Section2 has 200vw, - Section 3 has 200vw, etc. If I do this: - For the first section is ok, because it starts from zero. But from the second : gsap.timeline({ scrollTrigger: { trigger: "body", //6 è il numero delle sezioni totali - 1 start: 'top top-=' + (section2OffsetLeft - window.innerWidth / 2) * (containerWidth / (section2OffsetWidth * (6))) , end: '+=' + section2OffsetWidth * (maxWidth / (section2OffsetWidth * (6))), scrub: true, onUpdate: self => { console.log('second section'); console.log(self.progress); }, }, // backgroundColor: "red", ease: "none" }) The timeline will trigger very very far from the actual point. Is that because the width of each section are different? Thanks a lot you are really helpful.

I'm sorry but I'm not able to resolve this. I'm tryng to locate the first start of each section. Suppose I have three sections, #Section1, #Section2, #Section3. I want to locate the start and the end of each section, so I could apply gsap transition in the interval from the start and the end of each section. gsap.registerPlugin(ScrollTrigger); const sections = gsap.utils.toArray(".panel"); let maxWidth = 0; let index = 0; const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { index++; switch (index) { case 1: section1Width = section.offsetWidth; break; case 2: section2Width = section.offsetWidth; break; case 3: section3Width = section.offsetWidth; break; } maxWidth += section.offsetWidth; }); So, after, I defined the variables start and end of each section: section1Start = 0; section1End = section1Width; console.log('Sezione 1 Inizio: ' + section1Start + ' Sezione 1 Fine: ' + section1End ) section2Start = section1End; section2End = section2Start + section2Width; console.log('Sezione 2 Inizio: ' + section2Start + ' Sezione 2 Fine: ' + section2End); section3Start = section2End; section3End = section3Start + section3Width; console.log('Sezione 3 Inizio: ' + section3Start + ' Sezione 3 Fine: ' + section3End); Then, I do a transform to #section 1 gsap.to("#section1", { scrollTrigger: { trigger: "body", // elemento oggetto dello scrolltrigger // start: () => "0 -" + (document.querySelector(".container-scroll").offsetWidth / (sections.length - 1) * 1), start: "top-=0", end: "+=" + section1End, scrub: true, markers: true, onUpdate: self => { console.log(self.progress); }, }, backgroundColor: "#000", ease: "none" }); But actually the end of the gsap transform is more long than the actual width. I don't know where are my mistake becase the calculations are correct. Where am I wrong?

Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your help gsap.from('#text-1', { opacity: 1, x: -300, scrollTrigger: { trigger: '.red', start: '80% 50%', end: '+=500', scrub: 1, }, }); gsap.from('#text-2', { opacity: 1, y: 300, rotate: -90, scrollTrigger: { trigger: '.red', start: '60% 50%', end: '+=500', scrub: 1, }, });