Jump to content

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

mikel last won the day on July 1 2021

mikel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. Hey MIKE790, You could define a start position: start: "top -30" Happy scrolling ... Mikel
  2. Hey WEINDE, Try to build up the animation piece by piece, step by step. Take a close look at the positioning options (Positioning animations in a timeline). Then build the tweens: order, timings, distances, overlaps ... https://codepen.io/mikeK/pen/XWgMvGy?editors=1010 And then integrate the scroll trigger. Happy scrolling ... Mikel
  3. Hey DoPhuongAnh, Welcome to the GreenSock Forum. It's a lot of fun: a color 'kaleidoscope'. https://codepen.io/mikeK/pen/powWwMm Happy scrolling ... Mikel
  4. Hey SANDY, Its OK. Here an example using SVG and a fading effect. https://codepen.io/mikeK/pen/QWgMJjr Happy tweening ... Mikel
  5. Hey SANDY SAMEH, A prepared CodePen with your case would be a polite gesture, it would save me some effort. Does this scenario correspond to what you have in mind? https://codepen.io/mikeK/pen/XWgaPMp Happy tweening ... Mikel
  6. Does this example come close to what you want? https://codepen.io/mikeK/pen/WNOOYaW?editors=0010 Happy Tweening ... Mikel
  7. Hey Laurentplenet, Try a rectangle with side curves: outward / inward. Here e.g. bezier curves https://codepen.io/mikeK/pen/JjJJZJq Happy tweening ... Mikel
  8. Hey VITALIY, As a starter, this example could be helpful. https://codepen.io/mikeK/pen/eYRRgQZ Happy tweening ... Mikel
  9. Hey WEINDE, A lot is possible. Try to take the first steps for this yourself. Happy tweening ... Mikel
  10. Hey WHIZZBBIG, This could be an option: https://codepen.io/mikeK/pen/abmPjxz Happy tweening ... Mikel
  11. Hey Weinde, You can define the relevant objects for a loop. Then this is how it works https://codepen.io/mikeK/pen/XWgMvGy?editors=1010 Does that help? Mikel
  12. Hey WEINDE, Welcome to the GreenSock Forum. This could be an option if I interpret you correctly. https://codepen.io/mikeK/pen/eYRvXKg Happy tweening ... Mikel
  13. mikel

    Tween around circle

    ... a little game with circles: https://codepen.io/mikeK/pen/PojpQBe?editors=1010 Happy tweening ... Mikel
  14. ... more polylines: https://codepen.io/mikeK/pen/NWgdgvG Happy tweening ... Mikel
  15. Hey Donny, It is certainly a matter of taste. You could also use GSAP SplitText to build up the popup in steps. https://codepen.io/mikeK/pen/eYRgEaa?editors=1010 Happy tweening ... Mikel
  16. ... and another concept. Additional connecting lines could be set separately in relation to this polyline. https://codepen.io/mikeK/pen/jOwybLM Happy tweening ... Mikel
  17. Hey INKORPORATION, It may well be that I don't understand your intentions properly. This would be my interpretation. https://codepen.io/mikeK/pen/0de2740e35f205301f110ae226aa8386 Happy tweening ... Mikel
  18. Hey PG1, It may well be that I don't understand your intentions properly. If you create a timeline with several positioned tweens, then you will see the result of the positioning directly. The extensive syntax of the options is listed in the DOCS. In addition, a visualization for better understanding. https://codepen.io/GreenSock/pen/PopXddg Happy positioning ... Mikel
  19. Hey CREEK, With us they say: no master fell from heaven. I really enjoy creating little jokes. So step by step. It will be fine. https://codepen.io/mikeK/pen/wXbKEY?editors=0010 Happy morphing ... Mikel
  20. Hey @polymedia, Welcome to the GreenSock Forum. This should give you some pointers. https://codepen.io/mikeK/pen/vYgGqLB Happy tweening ... Mikel
  21. There may be simpler solutions. https://codepen.io/mikeK/pen/d703d3fae09a6a9ed6ac66f7ffb7f9ac?editors=1000 Happy tweening ... Mikel
  22. And another alternative: in addition to other details, instead of gsap.ticker, the onUpdate feature is used here for synchronization (point / container). https://codepen.io/mikeK/pen/13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 Happy scrolling ... Mikel
  23. Hey @Lolia Trafam, You could try this ... https://codepen.io/mikeK/pen/5e4e06346f3c6a27ff91a5380a627d73 Blobs are generated by blobmaker Happy morphing ... Mikel
  24. Hey @Skibby, This is a good starting tutorial: sarasoueidan blog: svg clipping Can you provide a minimal demo? So we can help you with your issue. Happy tweening ... Mikel
  25. Hey @ThomasDue, Unfortunately, I'm not sure what exactly you want to achieve. Perhaps this (a little tidier) example will help you. Using viewBox for this case is not advisable. Setting of #container does the job here. If you also want to adjust the size of the SVG elements, mediaQueries may be suitable. https://codepen.io/mikeK/pen/14f1a789a064937cd32c044cd8fb4b4c?editors=1010 Happy scrolling ... Mikel