scavaliere

@GreenSock you're really a Superhero Thank you very much, I thought it was more difficult. Read about endX but not maxX

Hello everybody and happy new year! I am working on a Draggable which - basing on dragger position - changes a text inside a div. I would need to control this in two states: - hitting the left part of the boundaries (start position) -> change the text in "Open" - hitting the right part of the boundary (end position) -> change the text in "Close" I am using the hittest but I am not very sure I need to bind to onDragEnd or something else and, anyway, it doesn't work correctly. I would need to change the text inside the div ONLY when the cursor hit the start or the end of its container. Anyone can help me to solve the problem? Thank you in advance!

Hello everyone, I'm trying to use layered pinned section animation with some animations in it. As the codepen attached, I'm trying to: - scroll - pin to blue section - activate animation on the main h1 title with scrub - pin the animation till the end of the section All this keeping the layered animation. I have made a test but the next panel starts to overlay before the animation is finished and pinning the animation inside makes the section flickering and disappearing. Any ideas? Thank you!

Hello @Cassie! Thank you for your solutions, they work perfectly! It's exactly what I need Only one thing: if I add a scale to the box on my production site, a strange thing happens: the absolute box appears even if it should be invisible until the end of the section. It doesn't happen on the leave back or enter back, only on enter the first time. Another consideration: if I refresh the page and I am in the middle of the website, it wrongly loads the element and make it visible as it seems the right scrolltrigger is not initialized. Is there a way to avoid it? Thank you in advance!

Hello, I'm using ScrollTrigger animations to animate a main object. It is fixed from the start but at the third section, when the horizontal scroll starts (orange section), it should stay inside the section and scroll horizontally as it's inside the first slide. In few words I tried to pin the black element when the scroll reach the end of the orange section. I tried to change position dynamically (from fixed to relative) but it makes it doesn't work at all. Anyone can help? Thank you in advance!

Hello @mvaneijgen! Thank you for your solution, it works like a charme. I wasn't aware of that utility, I will take a deeper look Sorry for the Codepen, it was on private mode, I will make it public

Hello, I'm trying to animate an image with the help of Draggable. I have adapted this example https://codepen.io/GreenSock/pen/mdVEpKK with my dragger, I don't understand why it's not working. Anyone can help me to understand? Thank you!

Hi @Cassie, superclear I surely misunderstood the main concepts about Scrolltrigger. I will take a deeper look to Observer to try find a better solution. I will update you asap

Hello @Cassie, my first animation it's not time based (in few words, it's not triggered after a specific time - is it correct?). The title animation is triggered by scroll, same thing happens with first section slide up. Both are managed by scrolltrigger. About your last reply, I will try to be more clear: - the page loads - on the first scrollwheel (or touch), the title should fadein from top. In this specific moment the first section (the blue one) shouldn't start to slide up but stay in its place - after the first scroll, also the blue section can start to slide up and the user can continue to scroll the page.

Hello @Cassie! Nice to see you again Actually, taking a look to the demos, it's not exactly what I need. I would need to animate the title and then the first section. The examples shows multiple animations on different elements on scroll. I would only like to pin the first section till the animation is finished. About the second solution you provided, I would say no, I don't need to disable the scroll. Hope it's clearer.

Hello everyone! I'm struggling with this problem. In the codepen I attached, the first section slide up while the first title animates (fading in from top), while I would like to: - on the first scroll activate the "Title 1" animation - the section must be pinned till the text animation has finished, then slide up - after that, scroll can continue I tried to replace as start attribute "top" with "+=10%" to move the start point, but in this way the section disappears after the first scroll. Can you help me to figure out? Thank you in advance!

Hello, great! It's exactly what I needed! I will study your solution and I will take a deeper look to the demo. ... and obviously I will keep learning, as you suggested Thank you very much for you help

Hello again @Cassie! yes, exactly... but sometimes it's really really difficult to discourage useless web behavior and bad practices. Some clients have their own ideas and, believe me, it's quite impossible to convince them of the contrary Coming back to the pen: yes! It's exactly what I need but I also need to keep the "fullpage" (snapping) effect and the overlap from 1 to 2 section. The others can have the same classic behavior. Do you think it's possible? Thank you!

Hello @Cassie ! Thank you very much for your help! Well, you're completely right... but the client wants it in this way (don't ask me why). A little question: do you think there's a way to keep the scroll without scrollbar? However, the example you have linked is similar to what I need to achieve but only for the FIRST scroll. So the effect should: From 1 to 2 section: The first section overlaps the second, sliding out top. From 2 section to next: The second section will be overlapped by next sections and so on. About the observers, I will give it a try and I will let you know. Thank you again!

Hello everyone! I'm working on a website with layered pinned animations. The main animation is working well, however I would need to make possible that the first two sections (with a different class and nested content with a mask) works as layered pinning but with an inverted behavior. In few words: generally layered pinning make NEXT layers to overlay the PREVIOUS, while I need the FIRST section overlay the SECOND, keeping the snapping effect. After this specific animation, the next pinning animations should work as usual. I tried to use this snippet to control the zIndex of the first two sections without results (the animation breaks and restarts every time from top): gsap.set(".panelz", { zIndex: (i, target, targets) => targets.length - i }); where ".panelz" is the class of two nested sections inside the first main section. How can I solve this? Thank you in advance and have a nice day!

Hello everyone and TIA for all your support! I am making a landing page with GSAP, ScrollTo and ScrollTrigger plugins. As you can see from the Codepen, there is a simple scrolling animation with a specific duration on page load. The animation brings the user smoothly from A section to C section. While on Safari and Firefox (Win and Mac), the animation starts smoothly and correctly, on Chrome and Android browsers (Mi Browser in my case) it stops and it doesnt' run but after some seconds. It seems that duration in this case is read by Chrome like a delay and not the duration of the entire animation. The pen on Chrome explain exactly the problem, while on Safari or Firefox is running good. Anyone has an idea how to fix this strange behavior ? Thank you!

Hello @akapowl, sorry for updating the original codepen, I thought it would be easier to track the changes. I'll revert to initial pen. About the question: sorry again, maybe I wasn't clear enough. What I mean is that when I click on the anchor on my website with the snap script you suggested, the scroll STARTS but SNAPS continuously section by section. It doesn't go directly to the anchor I need. I attach a little video to make it clearer. As you can see from the video, when I click on the link on top, the scroll first snap (slowly) to next section, then it anchors to the right one. It seems the anchor goes section by section while scrolling. Hope you can help video.mp4

Hello @akapowl! I've checked the other post you linked. In my case the link is triggering a section scroll once the menu item is clicked but it doesn't reach the correct anchor. One click, one scroll. I would need a scroll to the right anchor. In that case I think every button works for every section but I have a single menu item that needs to anchor to the end of the page.

Hello @akapowl ! Thank you for the reply. The snapping is working well, but when I use an anchor link (in a menu for example) it doesn't work correctly. It goes section by section without anchoring or the anchor is wrong in first instance. I updated the codepen.

Hello everyone! I'm using GSAP ScrollTo and ScrollTrigger plugins. What I am trying to achieve is the immediate snap from section to section. Now, I need to scroll almost at the end of the section to make the next snap. I have already tried some solutions found on the forum like without results unfortunately. I attach my Codepen. Can someone help me to find a solution? Thank you in advance!

Hello @Shaun Gorneau! Thank you for your effort in solving my issue! I've seen the codepen, in fact is working but it gives different results on different resolutions. When I decrease the resolution and the height of the window, the scroll is not correct. However it's a great starting point! I will work on it and I will also wait your possible updates! Thank you again!

Hello everyone! I have made a wrapper with some div in absolute positioning to make them overlaying. I need two kind of animations: 1) ScrollTrigger driven, while I scroll the divs appear and disappear in fade 2) On button click, a section fade out and the next fade in. WHAT I GET: My problem is that if with scroll trigger it works correctly, when I click on a button the animation is correct but it seems unlinked to ScrollTrigger animation. In few words when I click on the button the animation runs correctly but, when I use scroll top or down, the just animated div keeps appearing and duplicated. It disappears only when I finish a full scroll. You can see it if you scroll on the second section (layered pinned divs) and click on "CHANGE" block read more. It runs the animation, in fact "CONNECT" div appears slowly, but after the animation if I scroll the div remain there. WHAT I NEED: I would need the animation to be "aware" of the div I am animating so: 1) when I click on first read more, the animation should make the second div appear 2) the div shouldn't be duplicated when I start scrolling again. The scrolltrigger animation should be linked to the button animation. Hope it's clear. Thank you in advance for all your suggestions! Have a nice day!

Hello Shaun, it works perfectly ! Thank you!

Hello! I would like to know if it's possible to have a smoothscroll effect on layered pinned divs. In my codepen seems not to work, when I click on link it jumps without scrolling in a smooth way. I'm using ScrollTrigger and ScrollTo plugins. Thank you in advance!

Hello! I've made a div rotation effect with different cards. On my Codepen I wasn't able to replicate the same behavior (it works perfectly) but on my production site the first time the page is loaded , when I click on the wheel the rotation stops (and it's ok) but I can't drag anymore. The rotation works if I move mouse from left to right, but not from top to bottom. If I reload the drag works again without problems. What can be the cause? Any ideas? I will happy to give more information if needed. Thank you in advance!