Jump to content

mikel last won the day on March 14 2022

mikel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. mikel

    Map animation SVG

    Hey @Altea, This case might help you: https://codepen.io/mikeK/pen/KKmdMdX?editors=1010 Happy tweening ... Mikel
  2. mikel

    svg stroke drow

    Hey @Lolia Trafam, In combination with the MotionPathPlugin it could work like this: https://codepen.io/mikeK/pen/oRazzE or https://codepen.io/mikeK/details/rNMxePX/d08a34f0e4bca3bdb59e4b91ecdc6e75 Happy tweening ... Mikel
  3. Hey, It's difficult to analyze something you can't see. If a case works in the CodePen, then it should also run live - unless you have made any changes or other influences there.
  4. Hey @Saleem Beg, Sorry, I have not seen. You need some space to see the effect. body{ height:500vh; //e.g. } Happy tweening ... Mikel
  5. Hey @mayyar Here is an alternative concept for the rotation. Is it roughly how you want to implement it? https://codepen.io/mikeK/pen/NWwRMgE Happy rotating ... Mikel
  6. Hey @Saleem Beg, I can't find any elements with class '.fade-in' or '.from-right' ... in your HTML. So nothing can animate. Happy tweening ... Mikel
  7. Just an alternative https://codepen.io/mikeK/pen/MWOeqPy?editors=1010
  8. Hey @OSUblake, It depends what you want. objectBoundingBox This value indicates that all coordinates inside the <clipPath> element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value. So define your <clipPath> coords as you need them relative to the bounding box of the element. https://codepen.io/mikeK/pen/mdqEBjy??editors=1010 Happy bounding ... Mikel
  9. Hey @Zoker, try a separate scrollTrigger for each element: gsap.utils.toArray('.fadein').forEach(function(part) { gsap.from(part, { scrollTrigger: { trigger: part, start: "center bottom", end: "bottom bottom", scrub: 0 }, opacity: 0 }); }); Happy tweening ... Mikel
  10. Hey @embrion You could use gsap.delayedCall(3, () => vid.pause()); to pause the video. https://codepen.io/mikeK/pen/WNXwvRj??editors=1010 Happy tweening ... Mikel
  11. Just a side-by-side-example of scrub and toggleActions. https://codepen.io/mikeK/pen/ZEaQgLB?editors=0010 Happy toggling ... Mikel
  12. Hey @Arzou, A lot is possible. Be creative in concept and implementation. Here is a rough layout for a report of a small NGO. The larger the value, the slower the process: tt = 25000; // 'total time' in px of scrub animation (line 12). https://codepen.io/mikeK/pen/8911550a3b01adf215086bc42091e4f4?editors=1010 Happy tweening ... Mikel
  13. Hey @Arzou, Here is a slider (based on GSAP Scrolltrigger) where the change is a 'bit more controllable'. https://codepen.io/mikeK/pen/mdqVENQ?editors=0010 Happy tweening ... Mikel
  14. mikel

    Sound and Timeline

    Hey @benoit, I like DRUMS! https://codepen.io/mikeK/pen/zYPvMQz Happy drum ... Mikel
  15. Hey @subvikr, You can also tween an SVG line like this. (more to 'attr:{}' here) https://codepen.io/mikeK/pen/wvPKRmG Happy tweening ... Mikel
  16. @Sunny Shah There are different ways. Here is a variant for a color change. https://codepen.io/mikeK/pen/GROpYbO Happy tweening ... Mikel
  17. Hey MIKE790, You could define a start position: start: "top -30" Happy scrolling ... Mikel
  18. 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
  19. 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
  20. Hey SANDY, Its OK. Here an example using SVG and a fading effect. https://codepen.io/mikeK/pen/QWgMJjr Happy tweening ... Mikel
  21. 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
  22. Does this example come close to what you want? https://codepen.io/mikeK/pen/WNOOYaW?editors=0010 Happy Tweening ... Mikel
  23. Hey Laurentplenet, Try a rectangle with side curves: outward / inward. Here e.g. bezier curves https://codepen.io/mikeK/pen/JjJJZJq Happy tweening ... Mikel
  24. Hey VITALIY, As a starter, this example could be helpful. https://codepen.io/mikeK/pen/eYRRgQZ Happy tweening ... Mikel
  25. Hey WEINDE, A lot is possible. Try to take the first steps for this yourself. Happy tweening ... Mikel