Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/05/2018 in all areas

  1. Hi @alessio Welcome to the forum. You just need to add transformOrigin to your tween so the element scales from the middle like this: TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, transformOrigin:"center center", repeat: -1, yoyo: true}); More info here: https://greensock.com/docs/Plugins/CSSPlugin#transformOrigin Hopefully that helps. Happy tweening and welcome aboard.
    3 points
  2. Hi alessio, Just use transformOrigin. TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, repeat: -1, repeatDelay:0, yoyo: true, transformOrigin: 'center center'});
    3 points
  3. Hi and welcome to the GreenSock forums, My guess is that you aren't loading CSSPlugin which is necessary to animate css properties of DOM elements.
    3 points
  4. Yeah, that actually has nothing to do with GSAP. It's just how Safari renders things in 3D. Unlike other browsers, it attempts to render the intersecting planes in 3D, and it ignores z-index (in that regard). In your example, one thing you could do is just push the header way forward in 3D space using transform: translateZ(100px).
    3 points
  5. Yes! That was a simple as that. Sorry for my mistake. I thought that I could tween CSS properties with TweenLite alone as I am used to use TweenMax. I should have payed more attention. import TweenLite from 'gsap/TweenLite' import 'gsap/CSSPlugin' Thank you for the help!
    2 points
  6. Hi and welcome to the GreenSock forums. You can put B and C anywhere you want inside A. C can end 3 seconds before B and A's onComplete won't fire until B is complete. By putting an onComplete on A (the parent of C and B ) you can be assured that all child animations will be done before A fires its onComplete. I have to say though I don't quite understand what his means. without having to worry about whether B plus the elapsed time in A before is start B is longer than the total duration of A. Perhaps there is a typo. If you need something different then what I suggested please clarify. It always helps to offer a very simple demo even if it has just a few animations and looks nothing like your actual project.
    2 points
  7. Hi and welcome to the GreenSock forums, Thanks for the demo. Your from() tweens are working as designed. Remember a from() tween always animates from the value you provide to the existing value. If you create a tween that animates from x:1000 to x:0 the engine will immediately set the STARTING x value to 1000. TweenLite.from(obj, 1, {x:1000}); //behind the scenes the engine sets x to 1000 and starts animating if you create another identical tween immediately TweenLite.from(obj, 1, {x:1000}) x is already 1000 (from the previous tween) so you are animating FROM 1000 to 1000. Please see the comments in the demo below and watch the console. Hopefully it clearly illustrates what is happening when you are calling loadAnimation() twice. Your to() tweens always worked fine because they don't monkey with the start values of the object they use whatever the existing values are.
    2 points
  8. Hi @Anya Welcome to the forum. Looks like @GreenSock beat me to it, but I'll throw out my two cents for you. When I have several groups in which I want the child elements to stagger and they're all the same, I usually just use a loop. Not that it's any better than a reusable function -- just another option. Happy tweening and welcome aboard.
    2 points
  9. I would recommend not placing the DrawSVG files in your node_modules folder because if you ever need to initialize this project on another computer, it won't be copied over from your repository automatically when you run your 'npm install' command (assuming you are not commiting your node_modules into your repository...). Instead, have a separate folder just for that sort of thing, I usually call mine 'vendors' and drop them there.
    1 point
  10. Hm, seems to work fine: Have you tried this import instead?: import DrawSVGPlugin from "gsap/DrawSVGPlugin"; If that doesn't work, I'm not quite sure what might be the problem in your setup. Are you getting any errors in the console?
    1 point
  11. Hm, I can't think of an easy way, no. Technically there's a pathFilter() method that'd spit back the two shapes with matching numbers of anchors in a cubic bezier-based string which I suppose you could loop through and try to compare stuff, but I don't see a simple way to deliver what you're asking for. Maybe figuring out the total distance that each corresponding point must travel between the two shapes, but even that isn't a perfect way to do this (in my opinion). You'd have to figure out the center point for each shape and offset all the measurements accordingly (otherwise, if one shape is in the upper left corner and the other is in the lower right, the distances are artificially far because I assume you just want to know the overall shape differences, not the absolute distance that each anchor travels). I wish I had an easy answer for ya. Maybe someone else has an idea.
    1 point
  12. Hi guys, I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s. Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off. I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you! const tl = new TimelineMax(); tl .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )
    1 point
  13. Thank you guys, both solutions helped!
    1 point
  14. Hi Carl, Thank you very much. That helped. My problem was that I has not paused animation B so it started as soon as I defined it and as such was not a child of A. That meant it continued playing after A had fired its onComplete. There was a typo in the text you quoted. It was supposed to read: without having to worry about whether B plus the elapsed time in A before I start B is longer than the total duration of A. Best regards, Miry
    1 point
  15. Holy cow, you put that out fast! That's exactly what I was looking for... you are the master. That whole bottom section under // Animate it is what ruined me. What you did is perfect and even seems to be smoother (though maybe my eyes are playing tricks). Thank you so much! And I agree, the structure of most Codrops stuff is a bit off. They do things in a very curious manner.
    1 point
  16. I would never guess! An interesting solution Thanks, Superhero.
    1 point
  17. Sure, you could just wrap that in a function and reuse it like this: That way, it's much easier to tweak that animation in just one spot. There are a bunch of ways you could do this actually. Does this help?
    1 point
  18. Thanks @Jonathan for the detailed followup! Sometimes all you need is the right direction to be able to google Thanks for taking the time!
    1 point
  19. Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?
    1 point
  20. Nice job @maxxheth This was my way of giving of everyone a soft introduction to creating animations in a more object oriented way using jQuery. If you want to take it a step further, the pattern I'm using could easily be adapted for ES6 classes.
    1 point
×
×
  • Create New...