italoborges

I think I got it. Instead of using the same ScrollTrigger as the smoothScroll, I created a new one for the contact section so I could manipulate it without the easing to get to the contact section. const viewport = document.getElementById('viewport') const sectionContact = document.getElementById('section-contact') const btnContact = document.getElementById('btn-contact') const stContact = ScrollTrigger.create({ trigger: sectionContact, start: 'top bottom', end: 'bottom top', scrub: true, toggleClass: 'content-active', }) btnContact.onclick = function (e) { e.preventDefault() const contactPosTop = Math.round(sectionContact.getBoundingClientRect().top) const viewportPosTop = Math.round(viewport.getBoundingClientRect().top) stContact.scroll(Math.abs(viewportPosTop - contactPosTop)) } ?

Thanks as always @OSUblake With this approach, when I click in the anchor, it takes me to the section scrolling there, I would like the same effect but without the scrolling animation. In my case I could perform that but the scrub doesn't seem to be update after going to the anchor link. I understood that I'm not positioning the window, but the viewport, right?

Hello everyone! Happy Sunday! I'm trying to create an anchor link to lead the user to the contact section without having to go through all the other ones. Since I'm using ScrollTrigger and also the helper function smoothScroll, there is a conflict between something that I can't figure out. You can see that when the user gets to the contact section by the anchor link, the blue box is not on its correct state. How can I set a scroll position without animation ( straight to the contact section) but respecting my "scrubs"? Thank you!

Yes, I get your point @Cassie and I totally agree but the client, you know! haha I created this example just to show the behaviour that I would like to achieve using ScrollTrigger. Taking your example, I'm going to try to improve the way I need for my particular case! Thank you!

Hi @OSUblake! I just updated the codepen removing the ScrollTrigger. That's what I would like to achieve using the snap property from ScrollTrigger. In this way, it would be better to control the scroll and perform the loop. Is it possible to achieve the same result as the css snap using ScrollTrigger snap? https://codepen.io/italoborges/pen/RwLQpxP?editors=0011

Thanks for your answer @OSUblake and sorry for the confusion. Basically I wanted to create a loop, when reach the end of the scroll, reset to the beginning. When at the beginning if scrolls up, it would go to the end. Regarding the snap property, until now I couldn't make it like the CSS Snap. Still trying though. The CSS Snap has automatically some features applied that I don't know if I can't the same from ScrollTrigger. For example, when you scroll just a bit, it goes back to the previous section. If you scroll with a higher speed, it changes to the next section without jumping to other ones. One at a time.

Hello all! I needed a solution for snapping the content to the nearest one based on the scroll speed. For that, CSS Snap worked like a charm! Now, with that in place I'm trying to create a loop in the content. If the content reaches the end and the user keep scrolling, the scroll should be placed at the beginning. The same behaviour if the user tries to go up when in the first section, the scroll should be placed at the end. There is some conflict here that I can't figure out. The scrollTrigger configured for the loop doesn't fire when it should. Does anyone can spot the problem? Many thanks!

Hello! Thank you all for the help on this! I'm almost there with my code. @OSUblake and @GreenSock, I might have found a bug using the scroll trigger loop. I was applying the solution, which is working perfectly btw, but after "reseting" the scroll to the end of the viewport, all triggers that have "onEnter" event, get dispatched. Please, check it out this CodePen. If you scroll up first, you see the onEnter (console) being dispatch even though we didn't enter into the trigger. https://codepen.io/italoborges/pen/JjroOJK?editors=1111 Once again, thank you! ?

That's exactly what I had in mind @GreenSock but didn't know how to achieve that. Is it possible to apply a smoothness to the scroll using this code? Because since the smooth mainly will be controlled by an external source.

Hello hello! I'm might not have an entirely question now but I would like to hear opinions to where to go in order to achieve my goal. I have a project with animations happening with ScrollTrigger. I would like to control the scrolls when it reaches the bottom or the top. - If reaches the bottom, the scroll is positioned in the top - If reaches the top, the scroll will be positioned in the bottom of the page This way the animations controlled by the ScrollTrigger will always seem in loop accordingly to the scroll. Looking into the examples I found this loop: https://codepen.io/GreenSock/pen/LYRwgPo It's very complex for what I need, but I was trying to understand it and to apply perhaps the same concept. One of the problems I'm facing is the easing, it would need to pause an animation, reset to the position y:0, for example, and finish the left easing time. Any idea how I could apply the same loop concept to my need?

Thank you @Cassie! It worked like a charm!!! ?

Thank you for clarify the problems I had there! I understood the use of the fromTo! About the percentage, I missed that one after a refactor, thanks for pointing that out. ? Another question regarding the tween. If I need to repeat this animation (opening and closing) for other sections, let's say this has to happen for all other sections... is that a way to re-use the same timeline or because we have a different scrollTrigger it's not possible? Thank you @GreenSock! ?

Thank you @Cassie! Just updated my question with better information and a CodePen. ?

Hello all! ? I'm struggling to understand some concepts of GSAP (Timeline) and ScrollTrigger. I have a simple animation like a door opening and closing when the user scrolls down. There will be a content for each section behind these doors. So, regarding this I have 2 main questions: 1. Slowing down the scroll If I need to go through each section slower then it is right now, should I increase the height of the section? Not the duration of the tween? 2. Responsiveness I added some media queries that will change the size of the content text. If the size of the window changes, there is a bug. The animation doesn't respect the new size/position and I can't figure out why ? Thank you!!! ? PS: I don't know why but in the embed CodePen, the LocomotiveScroll seems not to be working.

Thanks! Was my mistake! I had another function cleaning the styles

Hello, my problem is, I have some styles inline in a element: <div id="myDiv" style="display: inline-block; position: relative;">Some Text</div> And I'm trying to animate this div, like this: TweenMax.to($('#myDiv'), 0.6, { parseTransform: true, alpha: 1, left: 0, top: 0, scale: 1, ease: 'easeOutBack' }); How can I use TweenMax without removing my inline styles? Thanks.