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. Hey WHIZZBBIG, This could be an option: https://codepen.io/mikeK/pen/abmPjxz Happy tweening ... Mikel
  2. 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
  3. 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
  4. mikel

    Tween around circle

    ... a little game with circles: https://codepen.io/mikeK/pen/PojpQBe?editors=1010 Happy tweening ... Mikel
  5. ... more polylines: https://codepen.io/mikeK/pen/NWgdgvG Happy tweening ... Mikel
  6. 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
  7. ... and another concept. Additional connecting lines could be set separately in relation to this polyline. https://codepen.io/mikeK/pen/jOwybLM Happy tweening ... Mikel
  8. 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
  9. 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
  10. 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
  11. Hey @polymedia, Welcome to the GreenSock Forum. This should give you some pointers. https://codepen.io/mikeK/pen/vYgGqLB Happy tweening ... Mikel
  12. There may be simpler solutions. https://codepen.io/mikeK/pen/d703d3fae09a6a9ed6ac66f7ffb7f9ac?editors=1000 Happy tweening ... Mikel
  13. 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
  14. Hey @Lolia Trafam, You could try this ... https://codepen.io/mikeK/pen/5e4e06346f3c6a27ff91a5380a627d73 Blobs are generated by blobmaker Happy morphing ... Mikel
  15. 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
  16. 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
  17. Hey Jack, GSAP Draggable.hitTest() might be a smart alternative for a little animation gimmick. For a longer scrolling distance and some animations to be positioned, I find the onUpdate/progress feature perfect for me and easy to use in the production phase. Do not apologize, you are expected to always provide the most effective solution. And ... thanks for the honor. Happy positioning ... Mikel
  18. ... and if you want to determine a specific point on a long, curved path, use MotionPathPlugin.getPositionOnPath(). https://codepen.io/mikeK/pen/OJbWrmr Happy tweening ... Mikel
  19. Hey @LSchneiderman, The progress runs from 0 to 1. If the scrubbed animation has a duration of 1 sec (a good option), the position is identical to the progress. Discover the 'dancing trees' at 0.665 (its period of time is very small here in relation to 1 sec of the main animation): https://codepen.io/mikeK/pen/KKWNvNL?editors=1010 Another fun option: the use of GSAP Draggable.hitTest() (part of GSAP draggable): https://codepen.io/mikeK/pen/mdwyrZO Happy tweening ... Mikel
  20. Hey, Alternatively, you could use onUpdate of your scroll trigger to determine the desired position. onUpdate: (self) => { console.log(self.progress) // info for position }, Happy tweening ... Mikel
  21. Hey, You could possibly try this variant // Pin the accordion and move space gsap.timeline({ scrollTrigger: { trigger: ".accordion", pin: true, start: "top top", end: "bottom bottom", endTrigger: "body", scrub:0.5, invalidateOnRefresh: true, markers: true } }) .to('.space02', {marginTop:-320, duration:1, ease:'none'}) Does that help? Happy tweening ... Mikel
  22. Hey @pixelarchitect, You could use plain js to calculate the values. https://codepen.io/mikeK/pen/93aee0e9cb7cbee180137b484f9d1346?editors=0010 Happy tweening ... Mikel
  23. Hey @limbo, A simple variant: Determine the times with a normal video player. Then position the subs on a timeline as needed. https://codepen.io/mikeK/pen/93980b39d5a9b94408ad1d3499668af5?editors=1010 Happy tweening ... Mikel
  24. Hey @crmichael, What do you mean by 'animation on scroll trigger is not as required' ? You need a trigger to start the animation. https://codepen.io/mikeK/pen/363b79a78fbedd840f58ca7faf8c6189?editors=0110 Happy scrolling ... Mikel
  25. mikel

    Scroll down effects

    Hey @nicofonseca, Try ... body{ margin:0; } .scale { position: relative; height: 100vh; width: 100vw; } Happy tweening ... Mikel