Jump to content

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

mikel last won the day on June 6

mikel had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. Hey @hamsa@thoughtput.in, You could e.g. use a function with the relevant params. This can then be called with the corresponding callbacks (onEnter, onLeave, onEnterBack, onLeaveBack, ...) - and also for the click func. https://codepen.io/mikeK/pen/bGpNYoR Happy switching ... Mikel EdiT: I also changed the SVG: you might like the morph
  2. ... and sponsored by Volkswagen.
  3. Hey @selvinkuik, Sorry for my snappy answer - I didn't read your first post with concentration. Could have understood your intention. The example visualized in the CodePen then also helps me on the jumps. Here just for fun https://codepen.io/mikeK/pen/qBZBzje Happy tweening ... Mikel
  4. Hey @selvinkuik, You could also study the DOCs and e.g. keep an eye on toggleActions. toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Happy scrolling ... Mikel
  5. Hey @samuelhigginson, A 'ease:' power2.out 'stops the animation at the end and the transition is therefore not as you want it to be. So one way would be just one tween with ease: 'power2.inOut' https://codepen.io/mikeK/pen/OJNJywz Where is the music ... Mikel
  6. As a fan of random animations I would say that is excellent. Thank you
  7. Hey @Yaya, Hmmm - that is only a quick and dirty. You can also position the wings differently and try out suitable rotations.
  8. Hey @Yaya, If this is a hummingbird, I would just let the wings 'rotate' quickly. https://codepen.io/mikeK/pen/mdPbWvg?editors=1010 Happy flying ... Mikel
  9. Hey @Violetta, If you're already loading GSAP plus GSAP scrollTrigger, why use CSS transitions for that animation? Why not do it with GSAP instead? It'll give you more fine control over the animation. https://codepen.io/mikeK/pen/KKzPNbQ Happy batching ... Mikel
  10. Hhmmm - I remember a fly. Here a little revised and updated to GSAP3.0. https://codepen.io/mikeK/pen/rNxddjz Hey @GreenSock: Can you combine repeatRefresh and onRepeat / function? https://codepen.io/mikeK/pen/MWKNLVX?editors=1010 Happy weekend ... Mikel
  11. Hey @Dovisally, It is a question of logic. You need the array of sections and then the respective '.block', which you can then stagger. https://codepen.io/mikeK/pen/oNbKopZ Please use the current GSAP scrollTrigger version. Happy scrolling ... Mikel
  12. Hey @NightOwl, The 'key': trigger: target I added some toggleActions https://codepen.io/mikeK/pen/pogMJMq Happy scrolling ... Mikel
  13. Hey @anshul, Maybe this one? https://codepen.io/mikeK/pen/ExPBEBX Happy scrolling ... Mikel
  14. Hey @anshul, Welcome to the GreenSock Forum. Does this example meet your expectations? https://codepen.io/mikeK/pen/LYGKQrp Happy scrolling ... Mikel
  15. Hey, You could use simple staggers: https://codepen.io/mikeK/pen/zYrVxqp Happy tweening ... Mikel
  16. Hey @Nasr Galal, Your case in a codePen would be nice. Using classes, stagger and the new syntax - e.g.: https://codepen.io/mikeK/pen/eYJwYVz Happy tweening ... Mikel
  17. Hey, Here I have 'dug up' another concept: https://codepen.io/mikeK/pen/pogmXEz Happy tweening ... Mikel
  18. Hey ZACH, Cool concept! Happy creating ... Mikel
  19. Hey @Mike Hart, There are many ways to get GSAP. A good way: read the docs for installation. Happy tweening ... Mikel
  20. Hey @Mike Hart, Welcome to the GreenSock Forum. Normally, each ScrollTrigger will fire its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? That could get awkward to do manually. Same with IntersectionObserver So check out ScrollTrigger.batch(). Happy scrolling ... Mikel
  21. Hey @delux, Do you mean such a constellation? https://codepen.io/mikeK/pen/mdVJxwj Happy tweening ... Mikel
  22. Hey @jlordy1, Did you set dir="rtl"? <h1 id="quote" dir="rtl"> להישאר בחורים מגניבים</h1>. https://codepen.io/mikeK/pen/rbwBeG Happy tweening ... Mikel
  23. Hey @mylismyli, htlm objects and svg objects flexible, responsive to coordinate is not so easy. Theoretically, a simple solution would be to build everything - content and path - in a single SVG: proportions to each other would always be the same and everything responsive based on the viewBox. https://codepen.io/mikeK/pen/OJMGqEK Or you define static data for content (html objects) as well as for the path (svg) and then you can create several mediaQueries with adapted data depending on the window size. Happy tweening ... Mikel