Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

mikel last won the day on October 10

mikel had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. Hey @Ron Itelman, Do you expect this to happen? https://codepen.io/mikeK/pen/06537b3b69db4021a00e36c6bbd3036a If yoyo:true, every other repeat iteration will run in the opposite direction so that the tween appears to go back and forth. Happy repeating ... Mikel
  2. ... or you could use this option https://codepen.io/mikeK/pen/OJXpojK?editors=1010 Happy batching ... Mikel
  3. You could use ScrollTrigger.batch() Happy batching ... Mikel
  4. Hey Zach, When you get to my age, you'll get one too.
  5. Hey @bramroos, Welcome to the GreenSock Forum. You could use repeat-1 and defaults Anything in the defaults object of a timeline gets inherited by its child animations when they get created, so if you find yourself setting the same ease or duration (or any value) over and over again, this can help make your code more concise. https://codepen.io/mikeK/pen/rNLypdY?editors=1010 Happy morphing ... Mikel
  6. Hey @adiusz, Both test lines have the same coordinates. You can control starting and ending position like gasp.fromTo ("# test02", {drawSVG: '100%'}, {drawSVG: '0%', duration: 3, ease: 'none'}, 0) https://codepen.io/mikeK/pen/202a4d742f9e635df9057f229e7078e9?editors=1010 Happy drawing ... Mikel
  7. Hey @kevywalton, Just for fun: https://codepen.io/mikeK/pen/da9f32c7123f038e34be8d1195210462 Happy pulsing ... Mikel
  8. 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
  9. 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
  10. 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
  11. Hey @DaemonHK, Welcome to the GreenSock Forum. And here is your welcome present. https://codepen.io/mikeK/pen/rNxwpOm?editors=1010 Happy tweening ... Mikel
  12. ... or this could be an option https://codepen.io/mikeK/pen/PozzmaV Happy flying ... Mikel
  13. Hey @callmegoon, This could be an option https://codepen.io/mikeK/pen/eYzzpqP?editors=1010 Happy batching ... Mikel
  14. 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
  15. And this is where the cockroach crawls https://codepen.io/mikeK/pen/PoPjXPE?editors=1010
  16. Hey ZACH, I like the SundayBikeRoute and the quickSetter - wow. Thanks ... Mikel
  17. 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
  18. Hey @kevywalton, Is this beahvior like your case? https://codepen.io/mikeK/pen/QWENGaj Otherwise show yours. Happy tweening ... Mikel
  19. 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
  20. Hey @ud907, What does 'add truck with the road' mean. Please create a reduced simple case in a CodePen. Happy tweening ... Mikel
  21. Hey @Jasmine, If it's just about onmousedown / onmouseup, here's an example https://codepen.io/mikeK/pen/MWeKWbB Happy tweening ... Mikel
  22. mikel

    SVG line drawing

    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
  23. 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
  24. That could be an option https://codepen.io/mikeK/pen/wvWaOgp Happy listing ... Mikel
  25. mikel

    Looping Slider

    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