Jump to content

mikel last won the day on March 14

mikel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. Hey @hiba Welcome to the GreenSock Forum. There are many paths that lead to the goal. Just try something and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel
  2. Hey @JJJ, Perhaps you mean such effects that you can achieve with GSAP.observe. https://codepen.io/mikeK/pen/KKZKWKj/14611e829c8a93a47c4b6f3ad826d101?editors=0110 Happy observing ... Mikel
  3. Hey @krunal, It is not easy to understand exactly what you want. In this example, all elements are in one SVG for easier handling of the relationships between them. Take a detailed look at the process and code and try to understand what is happening and when. Of course, there are always several alternatives as to how a process should look and how it can be structured. https://codepen.io/mikeK/pen/oNppZqm?editors=1010 Happy tweening ... Mikel
  4. Hey @krunal, Then split e.g. the motionPath animation (start, end). And the change part starts a little later after the end of the first motion part. https://codepen.io/mikeK/pen/JjMrLeZ??editors=1010 Happy scrolling ... Mikel
  5. Hey, This could be an alternative solution. Move the SVG so that the 'moving point' remains at the same place of viewport. The basic animation 'moving point' has a duration of 1 sec. Adjust the desired further animations in terms of duration and positioning (helper: ScrollTrigger progress). https://codepen.io/mikeK/pen/MWrELvR?editors=0010 Happy scrolling ... Mikel
  6. Hey @Hysteresis, You should coordinate line draw and scroll movement also so that the course of your green line (the tip) does not run out of the viewport, is always in the picture. Here's an example ... https://codepen.io/mikeK/pen/MWoaXjV/13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 Happy scrolling ... Mikel
  7. Hey, The GSAP ScrollTrigger could offer another kind of 'helper'. It offers onUpdate the current progress = 'position of motionPath'. And that for any desired on the path. https://codepen.io/mikeK/pen/PoEmJyY??editors=1100 Happy helping ... Mikel
  8. Hey @Dennyno, Try it step by step. https://codepen.io/mikeK/pen/QWOBXBL Happy opening ... Mikel
  9. Fascinating what you can do with arrays. I've learned something. https://codepen.io/mikeK/pen/ExoNwdJ?editors=1010
  10. Hey @bannerboy, Welcome to the GreenSock Forum. Maybe I don't understand your intention correctly, it would definitely work that way. https://codepen.io/mikeK/pen/KKZNvbN Happy tweening ... Mikel
  11. Hey CARL, I was fascinated by the short code and didn't check it! Thank you. Mikel
  12. Hey @mjray, Take a good look at the code. Little but effective. https://codepen.io/mikeK/pen/WNdGbgR Happy tweening ... Mikel
  13. Hey @codanux, You could also use one forEach function (for both sections). And function based values combined with invalidateOnRefresh:true for the scrollTrigger. I like to test / choose the speed with appropriate relative values for the parameter 'end'. https://codepen.io/mikeK/pen/RwxGNZz Happy tweening ... Mikel
  14. Hey @Istiak Hossain Tushar Does this example match your ideas? https://codepen.io/mikeK/pen/ZEvOmeb EDIT: The example has been exchanged! Happy tweening ... Mikel
  15. Wraps have been more on my menu so far. Thank you Blake. P.S. Change UP and DOWN.
  16. Hey @Wizard of Oz This would be my logic to design a continuous slider. Expandable with split text. If you are interested in array methods, more e.g. here. https://codepen.io/mikeK/pen/qBpZObp Happy tweening ... Mikel
  17. Hey @chacrasoftware, Here is a concept that mixes ScrollTrigger and ScrollTo while adjusting speed to the distances. Maybe helps for your logic. https://codepen.io/mikeK/pen/PomGKON Happy scrolling ... Mikel
  18. Hey @chacrasoftware, Welcome to the GreenSock Forum. There are many paths that lead to a goal. Just try something out and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel
  19. Hey @fernandocomet, If the background has full color, then it can go like this ... https://codepen.io/mikeK/pen/jOYWPvO?editors=1010 You need a 'mask' which covers the relevant part. Try handwritten SVG code. There are some good tutorials. Happy coding ... Mikel
  20. Hey @archimedo, Do you mean this effect? Scrub links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. Here the setup changed a bit. Test different scrub values... https://codepen.io/mikeK/pen/oNpbgwX?editors=0010 Happy scrubbing ... Mikel
  21. Hey CARL, And you can be really proud of your long green socks history. And of course on your hyper express for young GreenSocks fans. Pick up the schnoz! Mikel
  22. Hey CARL, I can't find WORDS. https://codepen.io/mikeK/pen/yLpYvQJ??editors=1010 Happy shrinking ... Mikel
  23. mikel

    Random animations

    Hey @popland, Could this be a solution for you? With more than two options, random is also more fun. https://codepen.io/mikeK/pen/NWXqRqM Happy closing ... Mikel
  24. Hey @jenda, To cancel/kill a delayed call, save a reference to it and then call .kill() on it when needed. And create a new on mouseleave. https://codepen.io/mikeK/pen/MWjOQqV/8b42610a1c2e75dc0a8b660fdbb15cac Does it help? Happy tweening ... Mikel
  25. Hey @fernandocomet, There are several options: https://codepen.io/mikeK/pen/ZEGyeEr https://codepen.io/mikeK/pen/NWXPpde??editors=1010 Do you mean something like that? Happy tweening ... Mikel