Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 10/13/2018 in all areas

  1. Hi @LeoZ, Maybe this is just an option: GreenSock CustomWiggle Happy tweening ... Mikel
    4 points
  2. Hi and welcome to the GreenSock forums!! For what I can see there are two things that are getting my attention. The first one is the return statement in the ref method in your JSX. That's not needed, all you have to do is update the instance reference wih the DOM node. The second thing that gets my attention is the error you're reporting since, at least in the snippet you posted, I don't see offsetWidth anywhere. If you could create a reduced case sample in either codepen or stackblitz, it'd help to pinpoint the issue faster, because the error you're reporting doesn't add up to the code you're posting. Finally a few weeks ago a getting started with GSAP and React article was released here in the GreenSock blog, take a look at it and to the samples in order to get a better grasp of how you can create GSAP animations in a React app.
    3 points
  3. Hi @Clms, The first thing is - so my point of view - to keep the SVG shapes as smooth as possible: all points as bezier . The timeline then with yoyo effect (instead of jump back it runs back) ... Here's a quick example: Happy morphing ... Mikel
    3 points
  4. I assume you meant something like this, right?: Happy tweening
    3 points
  5. Hi @zozo, the reason for this trouble is a clash between what is being set in CSS and what is being overridden (due to specificity). In the CSS you have .disk{ transform: translate(-50%, -50%) } Which of course is perfectly valid. But what happens when this is run ... tl.fromTo(".disk", 2, {rotation:0}, {rotation:360, ease:Linear.easeNone}); is that the transform matrix is taken over. So, to keep -50% and -50% in the calculations, you can just set those as properties in the fromTo and let the mediaQuery handle it from there, like so Hope this helps!
    2 points
  6. It's pretty tough to diagnose for sure without a demo (like a codepen), but my guess is that you have a different number of buttons/bios/shortbios/longbios/certbios. You're looping through the "teamBtns", but then you're using the same index value to look up other items like bioText but if teamBtns has 10 elements and bioText only has 9, then you're gonna be getting a null value when you try bioText[9] (the 10th element). Trying to tween a null value ain't gonna work If you still need help, please post a reduced test case as a codepen and we'd be happy to take a peek. Enjoy GSAP!
    2 points
  7. Oh, sure, I'd probably use either TimelineLite to sequence the moves together or maybe even use a single TweenMax instance with a bezier tween, but that's a bit more complex because you'd need to define the path data as bezier coordinates. Not totally necessary - just an option. I'd recommend doing whichever feels more natural to you coding-wise (or logic-wise). It seems like basically: var tl = new TimelineLite(); tl.to(element, 1, {x:x1, y:y1}) .to(element, 1, {x:x2, y:y2}) .to(...) ... Does that help?
    2 points
  8. To move the whole group seamlessly you'll need a second copy. You can clone it, offset the copy x:100% and then tween both to a relative x:-=100%. Then just loop the tween. Happy tweening.
    2 points
  9. ahhh yes ! Thanks OSUblake !!! I didn't know we could do that. I repeat my self, but this forum is awesome !!!
    1 point
  10. Stop setting transforms in your CSS for stuff that you plan to animate. That includes dragging.
    1 point
  11. 1 point
  12. Forked yours and added controls to enhance what you added. Fleshing out all the pieces like how to reset rotation after rewinding, etc.
    1 point
  13. 1 point
  14. Those are exactly the two tools I was looking at, so yeah, that helps a lot (I think I just needed confirmation that I was even looking at the right tools for this project). And actually your example gave me an idea of how to write my logic as DRY as possible. Thanks a lot ?
    1 point
  15. You could use two paths each starting at the middle point and tween them with the same selector. Or starting with a tween from 'scaleX: 0' Check the CodePen:
    1 point
  16. Hi @rulercreative Welcome to the forum and thanks for joining Club GreenSock. Do you want to make this all move as a group or do you want each cloud to move individually? If it's the latter, I'd probably do something like this: Does that help? Happy tweening.
    1 point
  17. You are targeting `#line` in your .each, and you only have one ID of 'line'. You should be using a class in this case if you want to be semantically correct. See updated pen:
    1 point
  18. Hello @harp30 and Welcome to the GreenSock Forum! To do that you can use the GSAP Modifiers Plugin to create a seamless/infinite loop of your elements movement. https://greensock.com/docs/Plugins/ModifiersPlugin Here is codepen that use this concept horizontally, but can be used for vertical by using y instead of x: I hope this helps, Happy Tweening
    1 point
×
×
  • Create New...