Jump to content
Search Community

Baris Dogan

Premium

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by Baris Dogan

    Timeline - timescale - reverse()

    in GSAP

    Posted

    Hey Guys 

    I need your help with Timeline reverse animation. 

    I'm using that code (below) for Timeline Animation , 

    let dotTL = gsap.timeline({repeat: 0});
    function dotFnc()
    {
    gsap.set("#topNavBar", {visibility:"visible"}, 1);
    dotTL.timeScale(1);
    dotTL.to("#topDot", .5, { scale:1, ease: "back.out(1.7)", delay:1.1});
     
    dotTL.to("#selected_circleStroke", .5, { alpha:1, y:-46, scale: .75, ease: "power2.Out", delay:0}, 0);
    dotTL.to("#topLine", .5, { scale:1, alpha:1, ease: "power2.Out", delay:0}, -0.2);
     
    dotTL.to("#topNavBar", .5, {alpha:1, ease: "power2.Out", delay:0.3}, 1);
    dotTL.to("#logo_TopNavBar", .75, { y:"+=10", alpha:1, ease: "sine.Out", delay:0.3}, 0.5);
    dotTL.to("#backBtn", .75, { y:"-=5", alpha:1, ease: "sine.Out", delay:1}, 0.5);
     
    productFnc();

     

    }

     

    Then, I'm using that code (below) for reverse Animation, 

    dotTL.timeScale(5).reverse();

     

    when I re-start the animation a second time,  animation not work very well (attached the screen record)

    Could you help me with this 

     

    Many Thanks
    Baris

     

     

     

     

     

     

    MotionPath, current position

    in GSAP

    Posted

    Hey Rodrigo 

     

    Thank you for your time, and answer 

    As you said, the code is a little messy; I wrote very quickly and I didn't write a code :(  for a long time

    You are right, I removed the killFnc(). 

     

    Do you have any suggestions for a proper GSAP course? 

     

     

    Many Thanks 

    Baris 

    MotionPath, current position

    in GSAP

    Posted

    Hey 
    I wonder if somebody can help me with my navigation animation, MotionPath timeline.
    on the example; 
    animation is very slow and looped forever; dots are moving clockwise on the SVG 
    when we onMouseOver;      all dots pause, onMouseOvut;  all dots plays

    I'm using pauseFnc() - playFnc() functions  - [ timeline.paused( true )/timeline.paused( false ) ]

     

    When we click one of the dots, the selected dot needs to move to the start or end of the motion-path from the current position.

    In my example, the selected dot moves from the start point to the endpoint (only Travel Comfort btn is clickable ).
    I could not get the current position.

     

    Demo here: 
     

    Any help would be much appreciated! Feel like I've tried everything.

     

    All The Best
    Baris

     

    See the Pen MWzrmGP by barisDogan (@barisDogan) on CodePen

    Particle

    in GSAP

    Posted

    Hi Guys

     

    How are you? I hope all is well 

    I need your idea/help about the particle system 

    First please check the image that I attached 

     

    How can I do this animation 

    - First, particles create 1. Object then 

    1. Object create the 2.Object 

     

    I really appreciated if you give me an idea or example 

    Many Thanks 

     

     

     

     

     

    example.jpg

    Change the y value when animation play

    in GSAP

    Posted

    HAHHAHAH :D 
    You are lifesaver :)

     

    Thank you so much 
    if you don't kill me I need to ask something 

    Can I change the Y value when the animation playing?

    So let me explain;  Please take a look at the 6. line on the javascript

    in the 4. sec I'm changing object's Y position as "-=35px" up.. but then animation continues from the wrong Y value

    Do you know why? 

     

     

    Thank you 

    Change the y value when animation play

    in GSAP

    Posted

    Thank you for the quick reply

    I need to move just "text1_img".... not "maske" because of this, I have gave the id to image tag
    <image id="text1_img" mask="url(#maske)" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" />

    I guess it is not correct, How can I give the id to correct element?

     

     

    Change the y value when animation play

    in GSAP

    Posted

    On 10/26/2018 at 4:41 PM, Carl said:

    Hi Baris,

     

    It is very difficult to know what is happening without a live demo.

    Please create a simple CodePen demo with just enough code to illustrate the problem.

    If clicking on a button with 3 animated dots and expanding something isn't related to the issue, please leave that stuff out

     

    Instructions here: 

     

     

    Thanks!

     

     

     

    Hi Guys 

     

    I uploaded the CodePen

     

    There are 2 problems:

    - SVG is not displayed for these browsers on windows ( IE-EDGE/FireFox/Safari )

    - Change the Y  value when animation play

     

    I really appreciated if you help me 

     

     

    Change the y value when animation play

    in GSAP

    Posted

    5 hours ago, Baris Dogan said:

     

    Hi Jack
    Thank you so much

     

    I have tried but it doesn't work or I couldn't 

     

     var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});

     tween = TweenMax.fromTo(text_1, tween.duration() - tween.time(), {y:-110, ease: Elastic.easeOut.config(1, 0.5)}, {y:-200, ease: Power1.easeInOut});

     

    so how can I define the time of jump animation? 

     

    object's Y pos start from 0px to 200px in 9 sec  //  var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});  // this part OK

    at the 4. sec, object's Y pos  jumpUP "-=20px" ...  then animation continue to 200

     

     

     

    Many Thanks 

     

     

     

     

     

    Hi Jack 

     

     

    I have to try that code, it is work but not perfect 

     

    var tl = new TimelineMax({repeat:0, yoyo:true, repeatDelay:0, overwrite: true})
            tl.to(text1_img, 9, {y:167, ease: Power1.easeInOut},"+=1.8")
            .to(text1_img, .5, {y:"+=40", ease: Elastic.easeOut, overwrite: false}, "-=4")

     

    attached the screen record video, could you take a look please 

    you will understand very well 

     

    at 6.sec of the video, there is a gap.

    how can I fix it? 

     

    Many Thanks 

     

     

    Change the y value when animation play

    in GSAP

    Posted

    16 hours ago, GreenSock said:

    You mean dynamically or do you want to pre-program that type of thing from the beginning? Both are possible. I assume you meant dynamically, so here's what it could look like: 

    
var tween = TweenMax.to(element, 9, {y:200});
//then later...
tween = TweenMax.fromTo(element, tween.duration() - tween.time(), {y:110}, {y:200});

     

    There are other ways too, but hopefully this gets you what you need. 

     

    Hi Jack
    Thank you so much

     

    I have tried but it doesn't work or I couldn't 

     

     var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});

     tween = TweenMax.fromTo(text_1, tween.duration() - tween.time(), {y:-110, ease: Elastic.easeOut.config(1, 0.5)}, {y:-200, ease: Power1.easeInOut});

     

    so how can I define the time of jump animation? 

     

    object's Y pos start from 0px to 200px in 9 sec  //  var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});  // this part OK

    at the 4. sec, object's Y pos  jumpUP "-=20px" ...  then animation continue to 200

     

     

     

    Many Thanks 

     

     

     

    Change the y value when animation play

    in GSAP

    Posted

    Hey Guys 

     

    I need your idea 

    Can I change the Y value when animation playing?

    So let me explain;  object's Y pos start from 0px to 200px in 9 sec 

    in the 4. sec object's Y pos  (proximity 90px) and jump 20px up then animation  continue from 110 to 200

     

     

    How can I do that 

     

    Many Thanks 

     

×
×
  • Create New...