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

Everything posted by mikel

  1. Hey @hiba Welcome to the GreenSock Forum. There are many paths that lead to the goal. Just try something and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel
  2. Hey @JJJ, Perhaps you mean such effects that you can achieve with GSAP.observe. https://codepen.io/mikeK/pen/KKZKWKj/14611e829c8a93a47c4b6f3ad826d101?editors=0110 Happy observing ... Mikel
  3. Hey @Hysteresis, You should coordinate line draw and scroll movement also so that the course of your green line (the tip) does not run out of the viewport, is always in the picture. Here's an example ... https://codepen.io/mikeK/pen/MWoaXjV/13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 Happy scrolling ... Mikel
  4. Hey, The GSAP ScrollTrigger could offer another kind of 'helper'. It offers onUpdate the current progress = 'position of motionPath'. And that for any desired on the path. https://codepen.io/mikeK/pen/PoEmJyY??editors=1100 Happy helping ... Mikel
  5. Hey @Dennyno, Try it step by step. https://codepen.io/mikeK/pen/QWOBXBL Happy opening ... Mikel
  6. Fascinating what you can do with arrays. I've learned something. https://codepen.io/mikeK/pen/ExoNwdJ?editors=1010
  7. Hey @bannerboy, Welcome to the GreenSock Forum. Maybe I don't understand your intention correctly, it would definitely work that way. https://codepen.io/mikeK/pen/KKZNvbN Happy tweening ... Mikel
  8. Hey CARL, I was fascinated by the short code and didn't check it! Thank you. Mikel
  9. Hey @mjray, Take a good look at the code. Little but effective. https://codepen.io/mikeK/pen/WNdGbgR Happy tweening ... Mikel
  10. Hey @codanux, You could also use one forEach function (for both sections). And function based values combined with invalidateOnRefresh:true for the scrollTrigger. I like to test / choose the speed with appropriate relative values for the parameter 'end'. https://codepen.io/mikeK/pen/RwxGNZz Happy tweening ... Mikel
  11. Hey @Istiak Hossain Tushar Does this example match your ideas? https://codepen.io/mikeK/pen/ZEvOmeb EDIT: The example has been exchanged! Happy tweening ... Mikel
  12. Wraps have been more on my menu so far. Thank you Blake. P.S. Change UP and DOWN.
  13. Hey @Wizard of Oz This would be my logic to design a continuous slider. Expandable with split text. If you are interested in array methods, more e.g. here. https://codepen.io/mikeK/pen/qBpZObp Happy tweening ... Mikel
  14. Hey @chacrasoftware, Here is a concept that mixes ScrollTrigger and ScrollTo while adjusting speed to the distances. Maybe helps for your logic. https://codepen.io/mikeK/pen/PomGKON Happy scrolling ... Mikel
  15. Hey @chacrasoftware, Welcome to the GreenSock Forum. There are many paths that lead to a goal. Just try something out and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel
  16. Hey @fernandocomet, If the background has full color, then it can go like this ... https://codepen.io/mikeK/pen/jOYWPvO?editors=1010 You need a 'mask' which covers the relevant part. Try handwritten SVG code. There are some good tutorials. Happy coding ... Mikel
  17. Hey @archimedo, Do you mean this effect? Scrub links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. Here the setup changed a bit. Test different scrub values... https://codepen.io/mikeK/pen/oNpbgwX?editors=0010 Happy scrubbing ... Mikel
  18. Hey CARL, And you can be really proud of your long green socks history. And of course on your hyper express for young GreenSocks fans. Pick up the schnoz! Mikel
  19. Hey CARL, I can't find WORDS. https://codepen.io/mikeK/pen/yLpYvQJ??editors=1010 Happy shrinking ... Mikel
  20. mikel

    Random animations

    Hey @popland, Could this be a solution for you? With more than two options, random is also more fun. https://codepen.io/mikeK/pen/NWXqRqM Happy closing ... Mikel
  21. Hey @fernandocomet, There are several options: https://codepen.io/mikeK/pen/ZEGyeEr https://codepen.io/mikeK/pen/NWXPpde??editors=1010 Do you mean something like that? Happy tweening ... Mikel
  22. Hey @lt852, DOM, SVG, <canvas>, and beyond GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following: CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value. SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects. Any numeric value For example, an object that gets rendered to an <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js. More info in the DOCs e.g. on the page of GSAP CSSPlugin. Happy tweening ... Mikel
  23. mikel

    problems if animation

    Hey @zinjo, You could play with arrays for example. https://codepen.io/mikeK/pen/GRyRXGw?editors=0110 Happy tweening ... Mikel
  24. Hey @BUMBLE-BEE, Welcome to the GreenSock Forum. Check out GSAP ScrollTrigger and the many examples there. This is the tool and these are the suggestions that will help you. Happy tweening ... Mikel
  25. Hey @iDad5, You could use ScrollTrigger.addEventListener. Here an example https://codepen.io/mikeK/pen/RwWXbXb/c1099fe6d3d8c43ec2b928f006551450?editors=1010 Happy scrolling ... Mikel
×
×
  • Create New...