Jump to content
GreenSock

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

Leaderboard

  1. OSUblake

    OSUblake

    Administrators


    • Points

      12

    • Content Count

      5,963


  2. GreenSock

    GreenSock

    Administrators


    • Points

      7

    • Content Count

      16,391


  3. Dipscom

    Dipscom

    Moderators


    • Points

      3

    • Content Count

      1,588


  4. mikel

    mikel

    Moderators


    • Points

      2

    • Content Count

      1,888


Popular Content

Showing content with the highest reputation on 04/22/2021 in all areas

  1. I made one too. 😅 https://codepen.io/dipscom/pen/NWdENmr
    3 points
  2. I call this the Nesting Doll Timeline Technique: https://codepen.io/ryan_labar/pen/PoWxveg
    2 points
  3. You keep adding more animations to the timeline on every click. Just make the animation once. https://codepen.io/osublake/pen/e1a92bc3b9375cf74e6599da197fc6b0
    2 points
  4. I'm curious - is this for a class assignment or something? It looks remarkably similar to this other forums post: Well, I got intrigued and "whipped together" an effect (@PointC will appreciate that term) that'll make it super simple to zoom into certain parts of an element by animating the xPercent and yPercent and scale - you just tell it where on the image to zoom into like origin: [0.25, 0.8] would zoom into the spot that's 25% from the left, and 80% from the top (x and y axis). It automatically caps things so that the edges don't collapse toward the center, thus if you do [1
    2 points
  5. I'd just do a recursive function call to reorder the cards and start again. Simple example.... https://codepen.io/osublake/pen/a5d8def52e58227c738898c4d01e774e
    2 points
  6. Yes, there are several lotties component like in the Codepen. Thanks a lot for your time and code example. I will try to understand and see how i can implement. Thanks a lot
    1 point
  7. All functions must be arrow functions that include arrow functions. Everything must be a one liner. TBH, I'm actually surprised at how smooth that animation is using setTimeout.
    1 point
  8. Oh, I just noticed that it says it waits 200ms.
    1 point
  9. https://codepen.io/osublake/pen/68b071c8c8d2979b8086838dde4d267c
    1 point
  10. Yeah, I figured that, but I didn't want to complicate it more. So instead of setting the opacity of every card to 1, just set and animate the cards you want visible. https://codepen.io/osublake/pen/8380c56a4271a063d36ec1cca59fb2ca
    1 point
  11. Yep. That's why I said it might help to check for the size of the screen, or maybe something like this. https://github.com/kaimallea/isMobile I'm pretty sure that a laptop that has a touch screen shouldn't have any issues.
    1 point
  12. I really can't help without seeing what this.playLottie looks like and the context of your code. Can you make a really simplified demo?
    1 point
  13. Hey @sybilrondeau, from the DOCs .play( from:Number, suppressEvents:Boolean ) : self Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). So try .play(0) Happy tweening ... Mikel
    1 point
  14. You also might be interested in a helpful effect, @GreenSock created in a different thread for scenarios as such, @Alex_JS
    1 point
  15. I just updated the demo. It's just a matter of using function-based values and setting invalidateOnRefresh: true on the ScrollTrigger. https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d?editors=0010 Does it work better for you now?
    1 point
  16. haha, looks like alot of people are into this thing right now. Thanks again!
    1 point
  17. Have you poked around the demos section? Perhaps you can find some inspiration there. Here's what I imagine you were looking for, or at least it'll serve as a jumping-off point: https://codepen.io/GreenSock/pen/GRrwQRB?editors=0010 Here's a different concept (probably not what you're looking for, but I figured I'd drop it in here anyway): https://codepen.io/GreenSock/pen/rNOebyo Happy tweening!
    1 point
  18. I think there may be a misunderstanding of the logic though. An animation's playhead is typically controlled by its parent timeline's playhead progressing. This is part of the reason why it's not usually a good idea to nest ScrollTrigger-controlled animations inside of a timeline; it creates a scenario where the same animation is trying to be controlled by BOTH its parent timeline AND the ScrollTrigger (particularly if scrub is set). Like...if the parent playhead is moving forward, but the user scrolls backward...what's the child animation supposed to do? That's what I tried to
    1 point
  19. What does this.playLottie look like? If it expects an index, just pass it in. onEnter: () => this.playLottie(i)
    1 point
  20. I think I have a pretty neat solution here for getting a div to move back and forth. Think something like a yoyo, but horizontally. I'm still working on the reason the opacity doesn't go back to 100% on the second pass, but other than that, I'm pretty happy with it. Maybe I'll add a rotation this weekend if I have time. https://codepen.io/PointC/pen/WNRYpZY Edit: I'm kinda wondering if I can make it a little smoother too. I'll work on it.
    1 point
  21. Hy All, As Zach guided towards applying css property "will-change:transform". And I did the same for locomotive while set the lerp between 0.07-0.08 (you can play with lerp value to your liking mine is 0.08). It will remove the flickering of elements up-to like you will barely feel it. Hope it will be helpful. Point to be noted here is if you use "data-scroll-section" data-attribute for each section on the page then above solution will not work. This solution works on "locomotive and smooth-scrollbar (1st & 2nd demo on scroller proxy page). It's not working for
    1 point
  22. Yep, @mikel is exactly right. You could do this: gsap.to("#ball1, #ball2", { x: "random(-15, 35)", y: "random(-15, 35)", ease: "power1.inOut", duration: 1, repeat: -1, repeatRefresh: true }); https://codepen.io/GreenSock/pen/61f5574c8dae52f50ea62864db9bee38?editors=0010 There are a bunch of other ways to accomplish it too, but this is probably the simplest. ? Happy tweening!
    1 point
  23. Hey @Warren_A, Welcome to the GreenSock Forum. GSAP 3.0 is so convenient: var tl = gsap.timeline () .to('.ball',{ x: "random(-20, 20, 5)", //chooses a random number between -20 and 20 for each target, rounding to the closest 5! y: "random(-20, 10, 3)", duration:1, ease:"none", repeat:-1, repeatRefresh:true // gets a new random x and y value on each repeat }) https://codepen.io/mikeK/pen/vYEWqJY Happy tweening ... Mikel
    1 point
  24. This isn't documented, but this will allow the event to go through. Draggable.create(foo, { allowEventDefault: true }); Be careful about doing that because it might cause other issues. In Webkit, mouse and touch events are handled separately, and in IE/Edge, the default touchmove behavior is to pan the screen. You might be better off letting Draggable handle the click. Just check the event target for an href property like so... http://codepen.io/osublake/pen/9d581a9f3b162376c2afb53d2c6529ed/
    1 point
×