Jump to content
GreenSock

mikel last won the day on March 14 2022

mikel had the most liked content!

mikel

Moderators

  • Posts

    2,157

  • Joined

  • Last visited

  • Days Won

    71

 Content Type 

Everything posted by mikel

  1. mikel
    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. mikel
    Cool. For the archive https://codepen.io/mikeK/pen/QWOJmyQ
  3. mikel
    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. mikel
    Hey @NikitaKurnosov, There may be several solutions: https://codepen.io/mikeK/pen/abmPjxz?editors=1010 Happy tweening ... Mikel
  5. mikel
    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. mikel
    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. mikel
    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. mikel
    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. mikel
    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. mikel
    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. mikel
    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. mikel
    Hey Saif, Successful experiments are the most fun. The pen above has been revised again. Happy trying for the better one ... Mikel
  13. mikel
    Just a fun alternative: https://codepen.io/mikeK/pen/yLPEwmM Happy tweening ... Mikel
  14. mikel
    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. mikel
    Hey Rodrigo, Exciting you is a nice glow! https://codepen.io/mikeK/pen/NWwzgEG??editors=1010 Thanks Mikel
  16. mikel

    Motion Path

    mikel replied to Yaya's topic in GSAP

    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. mikel
    ... another option https://codepen.io/mikeK/pen/eYerxVm?editors=1010
  18. mikel
    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. mikel
    Here is an example with a glow image: https://codepen.io/mikeK/pen/OJOZPdz??editors=1000 Happy glowing ... Mikel
  20. mikel
    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

    mikel replied to Yaya's topic in GSAP

    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. mikel
    Hey @lich0320, Take a look at GSAP Flip. Happy flipping ... Mikel
  23. mikel
    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. mikel
    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. mikel
    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
×
Login Create Account