kobracode

Hello, sure. I will give an example: we have 2 main sections 100vh each. when you scroll from the hero to the second, the scroll will be once(snap) like go to. when second option is active, and I need to disable your from going back to the hero section (disappearing hero section) and also while you are in the second section and you scroll up or down to have the callbacks to trigger the content of the second section

Hello, as you may see in the codepen. I need, when you scroll down on the first viewport to go directly to second section like snaping. But my main issue is that i want, when the section (.box-a) reach the viewport to disable the option to go up, instead of that, (i want to create handle the scroll up and scroll down to display the inner classes) For example, i am on .box-a view, (i scroll down and i want to display .second-scroll and then third etc..) and if i scroll up i want the reverse, but user should have the option to see again the .hero section

Hello, is there any way to reduce speed on the horizontal scroll section? Regards, D

Hello, i am trying to reproduce the animation of this https://siloridge.com of the red text under the slider. i used lettering js to break text into lines(<span></span>),(good still here) and then i am trying to create the animation but i cant find out what animation settings on the transform, easiing and rotation should apply . gsap.set($(elem).find('span'), { rotation: 2, y: "100%", alpha: 0, }); gsap.to($(elem).find('span'), {rotation:0, y: 0,alpha:1, duration: 1.2,stagger:0.01, ease:'power4.inOut'}); Any suggestions? Regards, Dimitris

Hello, is there any quick way with gsap to make the animation of https://locomotivemtl.github.io/locomotive-scroll/ at section 3. with the Lerp elements?

Hello, thanks for your reply, i did but still doesn't work with locomotive correctly

Hello,i was looking to make a progress bar for my page, but the progress of the scroll is wrong. Also i need to add an option to change color, when in view on some sections. Regards, D

Hello, i would this post. That you can with scrolltigger make animations like full page, but i am using locomotive + scrolltrigger, i need a part of my sections to behaviour like fullpage. I need on my codepen the hero__inner sections behave like fullpage, or something similar, Thanks in advance

Hello @akapowl, take a look to the screenshot, i need when the section is in that view, color should be full.So i was thinking about if its available to change the background gradient to: default state (background: linear-gradient(0deg, rgba(217, 217, 214, 1) 55%, rgba(217, 217, 214, 0) 100%); and when is scrolling changing the (55%) value to 100% is that possible?https://codepen.io/skigo/pen/XWjxyOX thanks

Hello, i am trying to make the spacer section to be or look like fixed element and when you scroll the hero section overlap it, but as you way see the it doesn't work properly.

Hello there, I need a help, i am trying to understand how i can do different animations with scrolltrigger & locomotive when a section enters a view port , and a different on exit. For example here, i need the hero section starts autoAlpha: 0 when is leaving the view port, but i am not really sure the timestamp on the timeline, whats the position parameter to use.

thanks! that works for me! I need to ask i am trying to find a solution for the section.text to apply the full animation when on view of the section, and not step by step on scroll. When in view the full animation completes then pin and when exit fade-up

yea sure, i updated on the pen above! but the gap on the second repeater still doesnt' work and i got a huge white gap.

take a look here, also the second text has a huge space upper and animations doesnt; start https://codepen.io/skigo/pen/bGwjwXo?editors=0010

Hello, i need to use repeater for section text, but something works wrong with textTitle and textText, they apply the animation only on the first span. Any suggestion? }); gsap.utils.toArray(".section--text").forEach((section) => { const tls = gsap.timeline({ scrollTrigger: { trigger: section, scroller: ".o-scroll", scrub: true, start: "top top", end: "+=500%", pin: true, }, }); const delay = 0.2; const textTitle = section.querySelector(".fade-up-title span"); const textText = section.querySelector(".fade-up-text span"); tls .to(textTitle, { duration: 1, autoAlpha: 1, y: 0, stagger: delay }, 0) .to(textText, { duration: 1, autoAlpha: 1, y: 0, stagger: delay }, 1) .to(textTitle, { duration: 1, autoAlpha: 0, y: -200 }, 3) .to(textText, { duration: 1, autoAlpha: 0, y: -200 }, 3); });