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 @Debsfx, sorry, my example was too complex. Reduced here to the MotionPath function and synchronization. However, with an 'EGG'. It's almost Easter. https://codepen.io/mikeK/pen/yLPZXjj Happy tweening ... Mikel
  2. Cool. For the archive https://codepen.io/mikeK/pen/QWOJmyQ
  3. Hey, You need a clever condition. I love GSAP Draggable.hitTest https://codepen.io/mikeK/pen/LYOXjqm Is this what you expect? Edit: you need a second condition for 'toLeft' !! Happy tweening ... Mikel
  4. Hey @NikitaKurnosov, There may be several solutions: https://codepen.io/mikeK/pen/abmPjxz?editors=1010 Happy tweening ... Mikel
  5. Hey @Debsfx, Here's an example: sync 'moving wave' and a point. https://codepen.io/mikeK/pen/eYRRgQZ Do you mean something like that? Happy tweening ... Mikel
  6. Hey @cesare.polonara Welcome to the GreenSock Forum. I tried to solve a similar intention. https://codepen.io/mikeK/pen/mdqMgNb??editors=1010 Ti aiuta? Happy tweening ... Mikel
  7. Hey @JPM82, That might have something to do with the pseudo element. But I have no idea - not my area. https://codepen.io/mikeK/pen/ExbeQxd?editors=1010 Happy tweening ... Mikel
  8. Hey @FourteenEightEight, Welcome to the GreenSock Forum. Hmm, a demo of the problem - as Trapti said - would be great. In this case no issue. https://codepen.io/mikeK/pen/BeQNRe?editors=0110 Happy tweening ... Mikel
  9. Hey @Ajaykr089, Welcome to the GreenSock Forum. Here are some hints about 3d transforms And here's a little example: https://codepen.io/mikeK/pen/JjOaPEg?editors=0010 Happy tweening ... Mikel
  10. Hey @shilpa_gz, It's really not easy to understand your intentions exactly: What should happen, when and how? Here's an example: - the first text fades in shortly after the scrolling process begins (CSS: h1 is visibility:hidden; ) - special version scrollUp: if (self.direction === -1 && self.progress > 0.85). Fast rewind only from the last part. - like fading the texts, you could also show the pictures of the snowball https://codepen.io/mikeK/pen/zYPRNOj?editors=0110 Happy tweening ... Mikel
  11. Hey, I like it as a morph animation. Sorry if the path design isn't optimal. Should / could be a carrot. https://codepen.io/mikeK/pen/vYWajxw?editors=0010 Happy morphing by onpointermove ... Mikel
  12. Hey Saif, Successful experiments are the most fun. The pen above has been revised again. Happy trying for the better one ... Mikel
  13. Just a fun alternative: https://codepen.io/mikeK/pen/yLPEwmM Happy tweening ... Mikel
  14. Hey, Superfein, from the DOCS ScrollTrigger: Percentages and pixels are always relative to the top/left of the element/viewport. You can also define a single relative value like "+=300" which means "300px beyond where the start is", or "+=100%" means "the height of the scroller beyond where the start is". "max" is a special keyword indicating the maximum scroll position. What exactly is unclear?
  15. Hey Rodrigo, Exciting you is a nice glow! https://codepen.io/mikeK/pen/NWwzgEG??editors=1010 Thanks Mikel
  16. mikel

    Motion Path

    Hey YAYA, //give the timeline and child tweens their own id. Here an example: var tl = gsap.timeline({id: "timeline"}) tl.to(".orange", {duration: 1, x: 700, id: "orange"}) .to(".green", {duration: 2, x: 700, ease: "bounce", id: "green"}); // Now each id shows up in the animations menu "Global Timeline" as popup. Does this help you? Mikel
  17. ... another option https://codepen.io/mikeK/pen/eYerxVm?editors=1010
  18. Hey @Superfein, If you create the glow with a separate path, you can of course animate this path. https://codepen.io/mikeK/pen/MWOGLYx Happy tweening ... Mikel
  19. Here is an example with a glow image: https://codepen.io/mikeK/pen/OJOZPdz??editors=1000 Happy glowing ... Mikel
  20. Hey @Yannis Haismann, There is always an alternative. Here is an example with GSAP SplitText, where individual letters are animated. This also works with single, concrete words.There is always an alternative. https://codepen.io/mikeK/pen/MWOGqJG?editors=0010 Happy splitting ... Mikel
  21. mikel

    Motion Path

    Hey @Yaya, You need MotionPathPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); and for the circle a closing > Plus: an overflow:visible for this SVG. https://codepen.io/mikeK/pen/eYerZxd/c23ede8ad7873280de000904bac80289??editors=1010 A MotionPath animation based on a circle starts at 3 o'clock. You could rotate the circle as you need in advance. Happy tweening ... Mikel
  22. Hey @lich0320, Take a look at GSAP Flip. Happy flipping ... Mikel
  23. Hey @samwatts1988, What should be morphed to what result is not really clear to me. Here is just one interpretation https://codepen.io/mikeK/pen/ExbLxwE?editors=1010 Happy tweening ... Mikel
  24. Hey @samwatts1988, do you mean this? #start{ // add a stroke stroke:#f49969; stroke-width:3px; } // and then tween the fill to transparent tl.to( '#start', { fill:'transparent', duration: 1.5, morphSVG: '#end' } ); And here another prep of the path: https://codepen.io/mikeK/pen/xxPWoyQ Happy tweening ... Mikel
  25. Hey Jack, I had also tried - but I failed with the ScrollTrigger. So here's a little joke ... https://codepen.io/mikeK/pen/wvPmJOx??editors=0010 Happy tweening ... Mikel