Jump to content
Search Community

Dark19

Members
  • Posts

    4
  • Joined

  • Last visited

Dark19's Achievements

0

Reputation

  1. Thank you) Maybe you tell me why line so very fast filling? And Why line filling early than scene end? var s5Tween = new TimelineMax(); s5Tween.to($(companyLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw word for 0.9 .add(TweenMax.to(companyLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); How can I make it slowly?
  2. I create real example https://codepen.io/dark19/pen/WjwoWm. I don`t know how show the hidden element when blue fill go to limit. How Can I determine that fill before current element?
  3. Okay, thanks. I will try to show how it should look I want do it us like there https://serioverify.com/ on Features and Our Process sections, that line fill to some element and it have animation. But a don`t know how to do it with GSAP + ScrollMagic
  4. Hello! I have some issue with show elements. I fill svg line with help property stroke: function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength); $el.css("stroke-dashoffset", lineLength); } But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints. My code: // Init ScrollMagic var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, tweenChanges: true, duration: ScreenHeight } }); // Create scene $("section").each(function(){ new ScrollMagic.Scene({ triggerElement: this }) .setPin(this) .addTo(ctrl); }); var processLine = '#process-line'; // prepare SVG pathPrepare($(processLine)); var s4Tween = new TimelineMax(); s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); // Create scene var scene4 = new ScrollMagic.Scene({ triggerElement: "#section3" }) .setTween(s4Tween) .addIndicators({name: "1 (duration: svg)"}) .addTo(ctrl);
×
×
  • Create New...