Jump to content
Search Community

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

25
26
27
...
82
Page 26 of 82  
  1. mikel
    Hey @kevywalton, Just for fun: https://codepen.io/mikeK/pen/da9f32c7123f038e34be8d1195210462 Happy pulsing ... Mikel
  2. mikel
    Hey @rocketclowns, Welcome to the GreenSock Forum. Nice animation. Maybe it is better to create a smooth path with a mix of Q (= quadratic Bézier curve) and C (= curveto). https://codepen.io/mikeK/pen/6bd8b3dbb3420a77ef8816e37eb5516b?editors=1010 Happy tweening ... Mikel
  3. mikel
    Hey @GeS, If you want to animate the sea, you need 'space' // css .img__sea { position: absolute; height:200%; top:-100%; } // js var tl = gsap.timeline({ scrollTrigger: { trigger: "section.about__container", scroller: "#viewport", scrub: 0.05, pin: true, start: () => "top 20%", end: () => "+=250%", }, }); tl.to(".img__sea", { yPercent: 50, ease:Power0.easeNone, }); https://codepen.io/mikeK/pen/oNLLMWQ?editors=0110 Happy sailing ... Mikel
  4. mikel
    Hey @GeS, If you want to animate the sea. Try this .sea__img { position: absolute; top: 50%; height: 150%; } But I suspect you want to animate the yacht. Please create a CodePen only with this motif and your desired animation. Happy sailing ... Mikel
  5. mikel
    Hey @DaemonHK, Welcome to the GreenSock Forum. And here is your welcome present. https://codepen.io/mikeK/pen/rNxwpOm?editors=1010 Happy tweening ... Mikel
  6. mikel
    ... or this could be an option https://codepen.io/mikeK/pen/PozzmaV Happy flying ... Mikel
  7. mikel
    Hey @callmegoon, This could be an option https://codepen.io/mikeK/pen/eYzzpqP?editors=1010 Happy batching ... Mikel
  8. mikel
    Hey @Passionate, Welcome to the GreenSock Forum. Here you can see an example based on a bezier animation. https://codepen.io/mikeK/pen/poveLRo Happy tweening ... Mikel
  9. mikel
    And this is where the cockroach crawls https://codepen.io/mikeK/pen/PoPjXPE?editors=1010
  10. mikel
    Hey ZACH, I like the SundayBikeRoute and the quickSetter - wow. Thanks ... Mikel
  11. mikel
    Hey @Love Kumar, You could use a secret recipe from @PointC (here his version) - using a clipped 2nd target. https://codepen.io/mikeK/pen/eYzZBXG?editors=1100 Happy rotating ... Mikel
  12. mikel
    Hey @kevywalton, Is this beahvior like your case? https://codepen.io/mikeK/pen/QWENGaj Otherwise show yours. Happy tweening ... Mikel
  13. mikel
    Hey @Jasmine, My pen only shows a mouse event to control an animation. For the animation itself, @akapowl gave hints in his post. Happy tweening ... Mikel
  14. mikel
    Hey @ud907, What does 'add truck with the road' mean. Please create a reduced simple case in a CodePen. Happy tweening ... Mikel
  15. mikel
    Hey @Jasmine, If it's just about onmousedown / onmouseup, here's an example https://codepen.io/mikeK/pen/MWeKWbB Happy tweening ... Mikel
  16. mikel

    SVG line drawing

    mikel replied to Varunbht's topic in GSAP

    Hey @Varunbht, As mentioned in this thread To compensate for the 'faster' vertical movement, a logic could be defined that counteracts the position of the SVG. Here is a simple experiment adapted to certain sectors (a fixed width of the SVG!). Here quick modification of your case https://codepen.io/mikeK/pen/eYzJrQJ Happy scrolling ... Mikel
  17. mikel
    Hey @acg, I also have trouble seeing the starting point of the box. But my handicap is that in my old age the eyes and the speed of perception are no longer so good for a 0.4 sec animation. Therefore, for me, this is a slow-motion version where I can see that the animation is shown from start to finish. https://codepen.io/mikeK/pen/JjKGOYz?editors=1010 Happy scrolling ... Mikel
  18. mikel
    Hey @acg, If you want to animate the blue box with ScrollTrigger, please note that in your case the trigger ".mybox" is already above the scroller start position and so the animation is executed immediately. Here is a reworked example. https://codepen.io/mikeK/pen/zYBvgyZ?editors=1010 Happy scrolling ... Mikel
  19. mikel
    That could be an option https://codepen.io/mikeK/pen/wvWaOgp Happy listing ... Mikel
  20. mikel

    Looping Slider

    mikel replied to pOri_A's topic in GSAP

    Hey @pOri_A, You mix old and new syntax for stagger - please study the DOCS. And here is an example of how a stagger animation could be integrated at the beginning. https://codepen.io/mikeK/pen/VwjLVqW?editors=0010 Happy looping ... Mikel
  21. mikel
    Hey, One of my favorite pens https://codepen.io/mikeK/pen/dzmXvE?editors=1010 Happy tweening ... Mikel
  22. mikel

    Looping Slider

    mikel replied to pOri_A's topic in GSAP

    Hey @pOri_A, //CSS .wrapper .box{ position:absolute; ... } // JS: position the boxes gsap.set('.box', { x:function(i) { return i * boxWidth; } }); https://codepen.io/mikeK/pen/rNLBKYX Happy looping ... Mikel
  23. mikel
    Hey @shubham ghuge, If you just want to animate the lines: https://codepen.io/mikeK/pen/ZEOYdPb?editors=1010 Happy scrolling ... Mikel
  24. mikel
    Hey, This little experiment is based on https://codepen.io/PointC/pen/PdXLja?editors=0010 https://codepen.io/mikeK/pen/ExyavMp Happy tweening ... Mikel
  25. mikel
    Hey @Greenpig Check out this post too Happy tweening ... Mikel
25
26
27
...
82
Page 26 of 82  
×
×
  • Create New...