Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by scavaliere

  1. 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
  2. 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.
  3. 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.
  4. 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!
  5. 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
  6. 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!
  7. 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!
  8. 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!
  9. 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!
  10. 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
  11. 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.
  12. 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.
  13. 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!
  14. 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!
  15. 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!
  16. Hello Shaun, it works perfectly ! Thank you!
  17. 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!
  18. 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!
  19. Thank you @Shaun Gorneau ! Sorry but I'm a newbie Thanks for the corrections. I'll take a look to the pen.
  20. Hello everyone! I am trying to make a sequential animation inside a pinned section where the plus icon finish to rotate from left to right and - when the animation is finished - the text block starts to appear till the end of animation. Now the animations seem to be synched. I am using ScrollTrigger. Anyone can help? Thank you in advance!
  21. Hello! I finally found a solution Thank you for all your suggestions ! I updated my final codepen on top!
  22. Thank you @mikel and @Shrug ¯\_(ツ)_/¯ ! I'll give it a try and I will post here back my solution!
  23. Hello @mikel! Thank you again. It's really near to what I need but the entire wheel should be draggable.
  24. Hello ! Thank you guys for all your support! I will try to elaborate a bit: I need a rotating wheel where every single div has a different rotation following a circle path. I don't need to drag a single element like @mikel has presented (thank you, anyway :)) The final effect should be like the pic I've attached. I've tried to achieve this with some css transform for every div but I was wondering if it's possible to do it via GSAP dynamically. Hope it's more clear!
  25. Hello @PointC, thank you for the reply. I've replaced the elements with colored divs. Hope you can help!