Jump to content


  • Posts

  • Joined

  • Last visited

TomWWD's Achievements



  1. Thanks Craig, I didn't imagine it would be so simple. What is the most concise way to stop it later in the timeline, after it's served it's function?
  2. Hey guys Sorry for the very basic question, but i'm running an animation linked in the codepen (very simple state at the moment) and there's 2 parts that i'd like to loop while other animations in the timeline play, to be stopped at a later point. For example, if I added .to("#anim-loadingdot", 1, {repeat:-1, yoyo:true, bezier:{values:MorphSVGPlugin.pathDataToBezier("#anim-loadingpath", {align:"#anim-loadingdot"}), type:"cubic"},ease:Linear.easeNone}) the timeline would wait infinitely for it to finish before continuing. Is it possible to set this to run "infinitely" at a certain point, and then come back to stop it later? Thanks in advance and sorry for the basic question.
  3. Perfect! Don't know why I was using such an old version, I think I forked it from one of the official GSAP pens. Thanks very much for your help
  4. Hey there, I'm posting as I received some great advice with my animation before. The goal is to have the car follow the route, and it seems to work perfectly on mobile. The pertinent lines of code are below, and shown in action in the codepen .set("#Car", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50}) .to("#Car", 7, {bezier:{values:MorphSVGPlugin.pathDataToBezier("#CarPath", {align:"#Car"}), type:"cubic", autoRotate:90,},ease:Linear.easeNone}) However on chrome mobile the linked codepen should produce the car doing doughnuts on the grass area offroad. I'm wondering if anyone can help me identify the code causing it. Hopefully you can replicate the issue as a couple of friends couldn't reproduce in on their devices. Thanks for taking your time to read my post. -Tom.
  5. @mikel Thanks so much! Perfect solution, didn't expect it to be so obvious, this completely resolves my issue.
  6. Hi @mikel thanks very much for the quick response. The touchscreen seems like a really good solution to accidental mouseovers and makes it feel more interactive. Unfortunately, as you can see in my gyazo it still presents some issues if you mouseover while the bloganim timeline is running. Namely the #Screen-window-Background element not showing properly when you mouseover during the animation (They grey background to the screen window that slides in first). https://gyazo.com/1639bec58543f4147ce85f3a77bd72f1 but when I let it finish... https://gyazo.com/4efeb43df8a65769d2409962a728abff Ideally I'd like a solution to prevent these mouseovers from functioning until the intro timeline has finished, even if it isn't the most appropriate solution in this scenario, as I seem to run into this gap in my knowledge a lot, and it prevents me from creating more complex animations than simply elements that tween in. Thanks again
  7. Hey everyone, thanks in advance for your time. I've searched the forums for common solutions, but i'm a bit too new to JS to translate the more complicated ones into my simple task. I'm currently trying to get the animation in the provided codepen to work with the included mouseover feature correctly. If you try and mouseover while the animation runs, you'll see that the text elements fail to tween in by the time you mouseleave. I've searched the forums for solutions, but i'm still pretty new to JS so i'm rather dense as to how to use the isActive() function, which I assume would need to be used to prevent the mouseover working until all the intro elements have tweened in. To replicate this, try to mouseover straight away on the provided codepen, and you'll see that the text fails to appear from the intro animation. I've annotated the codepen, but here's the mouseover part. var wwdtransition = new TimelineMax({paused:true}); wwdtransition.to ('.screenobject',0.5,{y:300, autoAlpha:0}) .to('#playbutton', .3, {autoAlpha:1},"-=.2"); ; //mouseover functions $(document).on("mouseenter", ".col-md-12", function() { wwdtransition.play(); }).on("mouseleave", ".col-md-12", function(){ wwdtransition.reverse(); }); Thanks again for your time, i'm really enjoying using GSAP, and with a solution to this, I imagine I can just copy + paste it to replicate the effect in future work.