Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About NickNo

  • Rank

Contact Methods

Profile Information

  • Gender
  • Location
    New Zealand
  1. Thanks Zach, and sorry for the vague-ness - part of my question was how to actually stop all (including the hint which was nested)- I ended up using var root=gsap.exportRoot(); root.pause(); Just for my own understanding - in that start button click - changing from my function call to your on('click', startGlobal) stopped the double up of the animation - why is that?
  2. Hi, I'm trying to get my head around the best way to structure gsap when it comes to multiple tweens/timelines, and also controlling interactions between these and events on the page... This stripped down example is from a project where I've got multiple separate animations going on in an overlay window - they start when the window opens - when I close the window I want to kill all the animations. My issue is just getting my head around the best way to structure it and call timeline functions from inside other functions etc...(and I do realise the problems here might just be a general noobness and lack of understanding of scope etc..) Also, you'll see if you press start a couple of times it looks like the timeline doubles up or something - is there a way to stop any currently running animation that might be occurring on an instance of a timeline? So, if one of the awesome helpful and patient regular contributors could point me in the right direction....:)
  3. Beauty, thats cracked it And, "check your bloody SVGs" comment noted
  4. Thanks for the quick reply Zach, but you've lost me - where is that existing transform coming from (there's nothing in the html/css) - or do you mean the transformOrigin gsap is doing?
  5. This animation is part of a bigger landscape with lots of other animations going on - everything is looking fine except for this one animation on Windows (10) Firefox (77) - the train should come into the station and then leave again - on windows FF the outward journey jumps to the left of the screen! I thought maybe it was something elsewhere in the svg or my code, but even stripping it down for codepen it is still happening... Is this a specific FF bug? or am I doing something silly?
  6. That’s a really useful article thanks @ZachSaucier, immediately applicable to what I’m working on and will solve a few problems I had anticipated
  7. That’s awesome thanks for the suggestions...
  8. Thanks for that ... @mikel I didn’t realize you could use scale -3 in this way so that’s definitely useful to know, and @ZachSaucier yes I’ll have to pay much more attention to how paths are actually created before animating...
  9. So, I've got a SVG image of a landscape which will have a bunch of different animations happening in the background. One of these is a group of about 5-6 cows with flicking tails. These are all exactly the same, but with staggered tail flicks ..my question is - is the best approach here to just have separate cows in the html, all with different IDs (and tail IDs) and separate timeline functions for each - or is there a smarter way to approach it?? Thanks in advance for any suggestions
  10. Thanks Mikel, the alignment issue makes more sense: For the flipping of the car once its starts animating - I've fixed it by using "scaleY:-1,scaleY:-1" - I'm just trying to understand WHY that happens...?
  11. Ok, I'm a few days into playing around with gsap, and starting to really love it... getting stuck on a few things - here are a couple I'd appreciate some help with... I have an object on a path, but when I animate it, its upside down - I've tried a few things like trying to rotate in the .set() but that doesn't seem to work...is this something I can do in gsap, or should I do it elsewhere (css?). https://codepen.io/nickjacobsnz/pen/abdZdmZ The second question is about align:"self" using motionPath - I've read the docs and posts but still can't get my head around it - if I do the same animation, but with align:"self" I'm driving off the road - is "self" the path, or something else? https://codepen.io/nickjacobsnz/pen/wvMWMWY Thanks again:)
  12. NickNo

    Animating dashed line

    I feel like I'm contributing when I answer my own questions haha. I did find this tip from @PointC which was a quick Illustrator fix without having to code 2 sets of line animations: "Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export."
  13. NickNo

    Animating dashed line

    OK, I do have one more question on animating lines So, I've found that some of the animation is moving the wrong way when I animate the strokeDashOffset - is there any easy way to fix this other than going back and redrawing in illustrator, or doing something like I've done here - a separate .reversed animation: https://codepen.io/nickjacobsnz/pen/oNbxoGx
  14. NickNo

    Animating dashed line

    OK, I don't blame you for not understanding - it wasn't very clear, and in fact I was just confusing myself by not reading the code properly So, just to tidy up without the rest of the guff, and just focus on the line, this is the exact answer you gave and what I needed https://codepen.io/nickjacobsnz/pen/LYGGXJx
  15. NickNo

    Animating dashed line

    Just as an aside... I bought this into svgator with the water as solid (undashed) lines, which the tool has obviously converted into lots of ellipse paths... is there any way or advantage of doing this in GSAP? Ie animating a solid path into dashes rather than animating lots of paths of existing dashes?