Jump to content
Search Community

Baris Dogan

Premium
  • Posts

    15
  • Joined

  • Last visited

About Baris Dogan

Recent Profile Visitors

624 profile views

Baris Dogan's Achievements

  1. 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 timeline.mp4
  2. 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
  3. 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: https://codepen.io/barisDogan/pen/MWzrmGP Any help would be much appreciated! Feel like I've tried everything. All The Best Baris
  4. Baris Dogan

    Particle

    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
  5. HAHHAHAH 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
  6. 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?
  7. Hi Again I re-edit my pen and I have a different problem, I'm not sure here is the correct place even so I would like to ask I'm trying to move just "text1_img" but I can, text1_img and "maske" moving together I really appreciated if you give me an idea Please check my pen https://codepen.io/barisDogan/pen/BqXxMe manyThanks
  8. Sorry, I was rush! Totally agree... I was looking for a quick solution Many Thanks
  9. Thank you Dipscom the main problem is SVG is not displayed for these browsers on windows ( IE-EDGE/FireFox/Safari ) How can I fixed it?
  10. Hi Carl I have added the link but it has not displayed, that's why I add again this way please remove the space "http s" https://codepen.io/barisDogan/pen/XxLVQz
  11. 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
  12. 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 test2.mp4
  13. 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
  14. 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...