Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About emjay

  1. emjay

    endless moving dots

    Heya @Cassie, Of course, that makes total sense. I could have thought of that myself. But I didn't question the individual tweens anymore, but played with the durations and different scrub values. And yes, I forgot to remove the toggleActions. Thanks for that hint as well. Have a nice day Cassie. Martin
  2. emjay

    endless moving dots

    Hello @Cassie, The next step I wanted to do after the animation was working was to integrate ScrollTrigger. That actually works too, however I can't get the speed of the dots under control. Have a look at the following pen. It looks like it is flickering. Do you have any ideas about this? https://codepen.io/emjay/pen/JjyQyKQ Thanks again Martin
  3. emjay

    endless moving dots

    Hello @Cassie, it took me a few days to find the time to read through your answer and create my animation with your input. And I have to say, you've put me on exactly the right track. Here you can find the final animation. I am happy with it. Do you see any potential for improvement? https://codepen.io/emjay/pen/eYEwWKz Thanks again for your input
  4. emjay

    endless moving dots

    Hallo, I am trying to implement the following with GSAP: I have an SVG graphic with dots, you can see the file in the embedded pen. I would like to move these dots to the top right. (see example-1.png) The white area is the viewbox of the svg file. When moving to the top right, new dots should appear at the bottom, of course. Since I plan to make the whole thing endless, the question is how to accomplish this. Do I animate the path of each dot in a timeline from bottom left to top right and then bring it back to the start position at the bottom left when it is out of the viewbox with .set()? In the second image (example-2.png) you can see that I also plan to make the dots smaller before they leave the viewbox. So that there are no clipped dots when they move out of the viewbox. Of course the same goes for the dots coming back in from the bottom. At the end it would be great to scroll this timeline with scrolltrigger. But basics first. I would appreciate some input on how best to proceed. Thanks a lot in advance Martin example-1.png example-2.png
  5. Hello @OSUblake, Ah thanks, I wrapped it with defaults: {} now Good to know. For future readers of this thread, I created a new fork with your input and suggestions: https://codepen.io/emjay/pen/yLoyQvv So Thanks for helping me out. Also Thanks @Cassie Martin
  6. Hello @OSUblake, I used your approach to change my JS code: https://codepen.io/emjay/full/yLoyQvv There was a difference in your animation to mine. I'm using from so I had the same problem as in my pens above, that after coming from mobile to desktop, the notice box was hidden because of the inline styles. So I had to use gsap.set(".notice", {clearProps:"all"}); in my Js Code on line 11. With this line it works good I think. But is this a good approach? Thanks, Martin
  7. Hello @OSUblake, thanks for your response, I will take a look at it. Sorry with the Private Mode of my pens, i made them all public now. Martin
  8. Hello Cassie, I have now added immediateRender and everything looks fine on the initial load to the page, but now the animation in the mobile viewport is broken. I have the feeling we are on the right track. Do you have another tip for me? https://codepen.io/emjay/pen/6dd272ada7b0cd2dd04563a1f1a3f56c reset-animation-on-desktop-3-smol.mp4
  9. Hello Cassie, I have reworked my pen and used your media query listener. I also created the animation and the click event of the button outside of it, because otherwise it was registered again with every match. You can see this nicely in my last video, how the animation then runs multiple times. https://codepen.io/emjay/pen/746ffb6ec9b52f5a7bc50ade36552449 Now the change from Desktop to mobile works great, also multiple times. The inline stylings are removed on desktop and the box is visible again. But, now I have another problem. On initial load the box is not visible on the desktop, only when I was once in the mobile viewport and then switch back to the desktop. (please see the attached video) I guess this happens because clearprops is then triggered and removes the inline stylings. Now that I'm writing these lines, I think an immediateRender = false might help me. I'll try that. Martin reset-animation-on-desktop-2-smol.mp4
  10. Hi Cassie, thanks for your solution, I added it here: https://codepen.io/emjay/pen/fb1a4f84e6a6cada4aa2d006fd2e3340 But it doesn't always seem to work. Take a quick look at the following video. If Im going from desktop to mobile and again desktop to mobile, the button doesn't work anymore. Thanks, Martin reset-animation-on-desktop-smol.mp4
  11. Hi, i have created the following Pen to discuss a little problem I have right now. I want to animate an notice box via gsap at resolutions below 800px. With larger viewports the box should not be animated at all, but simply be visible. If I load the page with a viewport larger than 799px then the box is visible and everything is fine. If I load the page with a viewport smaller than 800px the box is not visible and the gsap animation works fine. So far so good. But if I now start with a resolution < 800px and then drag the viewport larger, the box is no longer visible from 800px. This is caused by the inline styles added by gsap. How can I remove them on the desktop without the animation not working mobile anymore? I have tried various things, but I can't get a correct result with any of them. noticeAnimation.pause(0); gsap.set('.notice', {clearProps:"all"}); document.querySelector(".notice").removeAttribute('style'); I hope someone has a tip for me how to get it working.
  12. Hello @GreenSock, that's really great, thanks for the clarification. I'll come back with the final result soon. Thanks and Happy Tweening!
  13. Hello GSAP friends, I am currently trying to implement the following: A video is displayed in fullscreen after opening the page, and then when I scroll or when the video is over, it should move to its actual position and size in the header. The whole thing of course only once, when I scroll up again it should stay at the end position. For the beginning I tried to move the video to its end position while scrolling. First only with gsap.from(), because I didn't achieve any significant result, I tried it now with the new FLIP plugin. With this I get it to work halfway when I click the second time. Please have a look at my example. Click once in the viewport and the video is in fullscreen. Then click again and you see what I actually want to achieve. (That the headline overlays the video I want to solve later so that it fades in from the left as soon as the video has reached its final position). And now I hope you can tell me how to do this in combination with ScrollTrigger. I haven't reached the solution with flip yet, so you have to click twice. Thanks for your help Emjay
  14. Hello @mikel, thanks again very much for demonstrating your solution. In your last example there is a little problem. On hover the div's are not visible. Thanks, Emjay
  15. Hello @mikel, thank you very much for your different approaches or perfecting them. I like it all much better to solve it with a SVG. However, I'm not so good at it yet, and I also have to display text that is maintained in a CMS. In the following pen I demonstrated the hover effect to make it easier to understand what I want / have to display. As you can see, it already goes quite well, what I do not understand why the box shakes briefly when closing. https://codepen.io/emjay/full/b980ba33696a413a71e2811a19e06bef But I don't want to move too far away from your solution. Do you see that I can do this with just a SVG? Or should I try to optimize my solution. The random movement I have unfortunately still not managed well. Also the effect from your last pen is really great. Really thanks again for your answers and the time you invested. Thank you! Emjay