Jump to content

mikel last won the day on March 14

mikel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


mikel last won the day on March 14

mikel had the most liked content!

About mikel

  • Birthday 05/30/1954

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

12,485 profile views
  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.