Jump to content
GreenSock

Pollux Septimus

Members
  • Posts

    20
  • Joined

  • Last visited

Recent Profile Visitors

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

Pollux Septimus's Achievements

  1. @GreenSock It doesn't matter anymore. I have used your solution. Thank you!! ❤️
  2. Unfortunately increasing the scroll distance wont help. The main issue is the first tick of the wheel. If the user inputs a single tick on a wheel the animation will snap vary fast. If the user scrolls a bit more, the animation runs pretty good, if the user scroll relative hard the animation will run until the end. I don't think that the scroll speed is the issue. To be honest after I tested it more I don't even know what the issue is. It's pretty annoying that this does not reproduce on the @GreenSock code pen. His solution was quite brilliant and I would really like to make it work.
  3. @GreenSock , I build it in my real project and it seems batter, very close to what I wanted and it should be fine. But I have some problems with the wheel on the mechanical mouse. From what I have reed there is a big difference between the touchpad and the mouse wheel delta. The animation runs very fast when using mouse wheel and I thing that difference is the problem. Does gsap have a way to normalize scrolling and make it the same for different scrolls behaviors?
  4. Hi @GreenSock, I have tring this using only snap but I wasn't successful. Although I would like the animation to run on a single scroll like in this demo . I have tried to replicate the scrolling object that would prevent the scrolling using the gsap ticker. I fell like there is the problem. I would appreciated if you could take a look at the please . Mean while I will try achieving the effect using your example. Thank you!
  5. I would like to snap to the next card with a single scroll behavior like in the codepen demos that i've shared.
  6. @iDad5 Hello, There is a commented version using pin and scrub. I have left all the code I tried because I tough I might be really close. I uncommented the scrub version for you. Also, those are the codepens that I referred to when linking the threats https://codepen.io/GreenSock/pen/NWxNEwY https://codepen.io/GreenSock/pen/abdNRxX
  7. @iDad5 Hello, There is a commented version using pin and scrub. I have left all the code I tried because I tough I might be really close. I uncommented the scrub version for you.
  8. I am fidgeting trying to achieve this effect for a while but I ran into some problems. I am trying to use the scrollTrigger callback to run a animation while the normal scroll is disable and enable it again after the animation finishes. I have use those two threads (thread1, thread2) trying this as their am looking for a similar result but those two example are using full page sections I am now sure if this would work for my animation, witch you can see in the linked code pen. I have also trying using snap when building the animation using pin and scrub but I did not manage to make it snap to each card. Also is not really what I am trying to achieve. The effect I am trying to create is when ever a user triggers a scroll behavior the animation snaps to the second card and so on while the entire section stays in place. After the animation come to completion the use would be able to scroll normally through the rest of the app. Like in thread nr: 2. My question is: Is what I am trying to do possible and if yes? Would you please take a look at the demo and point out what is it that I am not doing right?
  9. I understand. I will try observer plugin and I will come back If I have difficulties.
  10. Yes, so you saying that its impossible? I looked up the observer and it seems that is what I am locking for, but all demos are full vh / vw. Is there a way to transition to normal scrolling and have content below after something like this was implemented? https://codepen.io/GreenSock/pen/XWzRraJ If gsap doesn't have this ability's, js has a function that disables the scroll. I think I could disable it and enable it once the animation finishes using the onComplete function from gsap. This is just a though, I would have to code it to see fi it works.
  11. Hi @GSAP Helper, Maybe my question wasn't structured is the best way. I will create another thread with a batter mini demo and a batter structured question. I simply ask for someone to point out my mistake for why the animation doesn't stays pinned and not working on a single scroll and maybe for some existing demos that I might have missed. I DID NOT asked you to do all the customization for me, the reason I tried to detail what I wanted to achieve is to give you a batter perspective looking into it not as a mean for someone to do it for me. Simply put, the issue is that I am tiring to play one timeline at the time on each scroll, while the section is pinned. I want the animation to play normally not as scrub (that's why is set to false) and not matter the y position, scroll, delta or any of the actions you named above. I will take a look at the observe plugin maybe that is what I am looking for. Thank you very much for your answer and I apologize for my bad question.
  12. Hi, fixed the issue using a different formula. Thx!
  13. Hi, I am trying to create an animation where I scroll once and the text from the first card disappears and the text from the other appears while the image is rotating. I would like for the animation to start playing only when I scroll and the scroll should pe pinned until the animation ends. Also I would like it to for each card. Say I have 3 card, I would like to be able to scroll 2 time so all the card are visible. I have created a minimal demo, maybe you could point out my mistake. Some demos example would be grate as well.
  14. Hi, I have created this demo using only javascript but in my project I am using React. Someone on this forum helped me find a way to scroll to the specific image when clicking on a nav item. That person suggested to use SctollToPlugin but in my react project it does not work. The error that I receive is the one in the title (ScrollToPlugin.js:87 scrollTo target doesn't exist. Using 0). It points to this specific line sliderContainer.scrollTop. This is how I imported the plugins import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger; import { ScrollToPlugin } from 'gsap/ScrollToPlugin ; gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollToPlugin); This part is inside the useEffect. Does the ScrollToPlugin need to be installed separately from gsap? Like: yarn add ScrollToPlugin ?
×