Jump to content
Search Community

TomWWD

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by TomWWD

    Continuing timeline while infinite yoyo runs, to be stopped later.

    in GSAP

    Posted

    On 25/03/2018 at 3:48 PM, PointC said:

    If it were me, I'd probably name that infinite tween so you can easily control it later. Then add it to the main timeline. Maybe something like this.

     

    See the Pen PRKLKO by PointC (@PointC) on CodePen

     

    You could also put that infinite animation in a function and call it after any of the tweens on the main timeline. As with all things GreenSock, there are many roads to the goal.

     

    Hopefully that helps. Happy tweening.

    :)

     

     

     

    Yep, that sorted it! Thanks again.

    • Like 3

    Continuing timeline while infinite yoyo runs, to be stopped later.

    in GSAP

    Posted

    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.

     

    See the Pen rdzmRP by TomBismuth (@TomBismuth) on CodePen

    My Bezier curve car is going offroad on chrome mobile

    in GSAP

    Posted

    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.

     

    See the Pen KQvaLR by TomBismuth (@TomBismuth) on CodePen

    Disable jQuery mouseover TL while intro TL plays

    in GSAP

    Posted

    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 :D

    Disable jQuery mouseover TL while intro TL plays

    in GSAP

    Posted

    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.

    See the Pen rpEqVg by TomBismuth (@TomBismuth) on CodePen

×
×
  • Create New...