Jump to content


  • Posts

  • Joined

  • Last visited

About scavaliere

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

scavaliere's Achievements

  1. @GreenSock you're really a Superhero Thank you very much, I thought it was more difficult. Read about endX but not maxX
  2. 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!
  3. 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!
  4. 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!
  5. 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!
  6. 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
  7. 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!
  8. 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
  9. 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.
  10. 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.
  11. 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!
  12. 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
  13. 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!
  14. 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!
  15. 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!