Hysteresis

I am attempting to draw the green line without touching the plug, but just draw the line as I scroll down the page. I have the icons fading in how I want I am just struggling getting the line to draw as I scroll on the page. Thanks for your help

Thanks PointC - this worked perfectly! Here is my resulting pen: http://codepen.io/dchadney/pen/eZzoYN

I am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape. Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!

Hi Carl, thanks for your reply. I understand, that is why I provided the code in question within the post. At any rate, I figured out what was causing the problem. If I move the timeline into .click(function() then it works fine. No idea why that would be a problem, but I got it resolved. Thanks, Dan var popover1 = new TimelineMax({paused: true}); $("#overlay20Link, #dotNav2 .page20").click(function(){ popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); popover1.restart(); });

I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox. I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs. An example of the code in question is: TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0}); var popover1 = new TimelineMax({paused: true}); popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); $("#overlay20Link, #dotNav2 .page20").click(function(){ TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0}); popover1.restart(); yes.pause(); calibrate.pause(); popover2.pause(); popover3.pause(); okay2.pause(); }); Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working... navigation.js also contains GSAP code for global controls... Any suggestions? Thanks in advance!

Wow, thank you for digging into this and figuring it out. That is very helpful. SOLVED!

Thank you both very much for your replies. Unfortunately neither of these solutions are working for me using GSAP. The problem is in Chrome and it is happening to both the text and the containing div, so the SVG text solution will not work. I can get it working using CSS transforms like this method: http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t But that only works if I remove all GSAP references to scale. Jonathan I tried both of the methods you mentioned, the first solution using the GSAP set() method is not working. The second won't work because I want to be able to scale past a value of 1. I got it working without GSAP here: http://codepen.io/dchadney/pen/fojIb

I am trying to have an element scale on mouseover but the div and the text inside is pixelated. I can't figure out why... http://codepen.io/dchadney/pen/BnlFi

Good idea, awesome thank you. That worked perfectly!

I suspect that I would use this: onReverseCompleteParams:["param1", "param2"]} ?? but I don't know how to reference these parameters in my click event...

Ok thank you! What if I have multiple buttons that I want to have play the same timeline in reverse before leaving the page? Like this: var masterTimeline = new TimelineMax({repeat:-1, repeatDelay:120}); masterTimeline .to(".home-container", 0, {autoAlpha: 1, delay: 1}, 0) .from(".home-container #one", .7, {scale: 0, x: -4000, rotation:"-120deg"}, .25) .from(".home-container #two", .7, {scale: 0, x: 4000, rotation:"120deg"}, .2) .from(".home-container #three", .7, {scale: 0, x: -4000, rotation:"-120deg"}, .1) .from(".home-container #four", .7, {scale: 0, x: 4000, rotation:"120deg"}, .3) .from(".home-container #logo", 1, {scale: 0, rotation:"360deg", ease:Elastic.easeOut}, 1.2) .staggerFrom(".home-container #one p, .home-container #three p", .5, {scale: 0, autoAlpha: 0, x: -200}, 0.25) .staggerFrom(".home-container #two p, .home-container #four p", .5, {scale: 0, autoAlpha: 0, x: 200}, 0.25) .staggerTo(".home-container #one p, .home-container #three p", .3, {scale: 0, autoAlpha: 0, x: -200}, 0.25, 6) .staggerTo(".home-container #two p, .home-container #four p", .3, {scale: 0, autoAlpha: 0, x: 200}, 0.25, 6); var tweenBtn1 = document.getElementById("one") tweenBtn2 = document.getElementById("two") tweenBtn3 = document.getElementById("three") tweenBtn4 = document.getElementById("four"); tweenBtn1.onclick = function(event) { event.preventDefault(); masterTimeline.reverse(2.2); window.location.href = "POWERservices.html"; }; var tweenBtn1 = document.getElementById("two"); tweenBtn2.onclick = function(event) { event.preventDefault(); masterTimeline.reverse(2.2); window.location.href = "power360/index.html"; }; var tweenBtn1 = document.getElementById("three"); tweenBtn3.onclick = function(event) { event.preventDefault(); masterTimeline.reverse(2.2); window.location.href = "nexstation.html"; }; var tweenBtn1 = document.getElementById("four"); tweenBtn4.onclick = function(event) { event.preventDefault(); masterTimeline.reverse(2.2); window.location.href = "quiz.html"; };

I am trying to write a function that plays an animation when a link is clicked and then opens the link... so that I can play transitional animations between pages... This is my code, but I can't get the page to load after the animation: var tweenBtn = document.getElementById("one"); tweenBtn.onclick = function(event) { event.preventDefault(); tl.reverse(2.2); window.location.href = "POWERservices.html"; }; Is there a way I can add onComplete to my timeline that has just played in reverse? Or is there a better way of doing this?

Thank you both for your replies. It makes sense to me, but I am not good enough at coding to implement your suggestions and get this to work the way it should. I have tried to make it work but the animation seems to be playing all the way through every time it is dragged. I also can't get it to start playing from the point it was dragged to, and the animation doesn't play automatically (and update the slider) So basically I am stuck here: http://codepen.io/dchadney/pen/uCFje

I am using a jQuery Ui slider to control my animation, but when the animation is playing the slider handle is very jumpy, it seems to momentarily pause at the start of each animation. I have tried all kinds of things, from simplifying my timeline, removing delays, removing lables, changing easing, adding the jQuery Easing plugin, but nothing seems to work. So I am wondering if anyone has a solution for this, or can suggest an alternative. I have looked at other slider tools out there such as NoUiSlider, but I don't know how to set them up so that they can control the animation (and update with the animation). Or perhaps a way of doing this solely with Greensock. Here is my code: var tl = new TimelineMax({onUpdate:updateUI}) tl .fromTo("#route1", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .fromTo("#route2", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .fromTo("#route3", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .staggerFrom([oh1, oh2, oh3, oh4, oh5], 1, {opacity:0}) .to({}, 5, {}) .set("#mainRoute", {visibility:"visible"}) .to("#route1a, #route1b", 0.5, {strokeWidth:"16", stroke:"#5dc3f0", ease:Power2.easeInOut}) .to("#route1-text", 0.5, {fill: "#5dc3f0", ease:Power2.easeInOut}, "-=0.9") .to("#route1a, #route1b", 0.5, {strokeWidth:"6", stroke:"#ffffff", ease:Power2.easeInOut}) .fromTo(alt, 0.5, {autoAlpha:1, ease:Expo.easeIn}, {autoAlpha:0, ease:Expo.easeIn}) .fromTo(main, 0.5, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}, "-=1.0") .to({}, 5, {}) .to(".id1, .id1a, .id2a, .id4, .id4a, .id5a, .id6, .id6a, .id6b", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut}) .set("#rowLabel1, #rowLabel2, #rowLabel3", {visibility:"visible"}) .to(".label div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to({}, 5, {}) .add("row", "-=0.3") .to(".id4, .id4a", 0.3, {stroke:"#895881", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase4", {visibility:"visible"}) .to("#phase4 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#895881", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id5, .id5a", 0.3, {stroke:"#937963", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase5", {visibility:"visible"}) .to("#phase5 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#937963", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id6, .id6a, .id6b", 0.3, {stroke:"#B2D235", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase6", {visibility:"visible"}) .to("#phase6 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#B2D235", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to({}, 5, {}) .to(".id1, .id1a", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase1", {visibility:"visible"}) .to("#phase1 div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id2, .id2a", 0.3, {stroke:"#81D0D3", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase2", {visibility:"visible"}) .to("#phase2 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#81D0D3", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id3, .id3a", 0.3, {stroke:"#D6562B", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase3", {visibility:"visible"}) .to("#phase3 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#D6562B", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") var cloudsAnimation = new TimelineMax({repeat:50, repeatDelay:.5, yoyo:true}) cloudsAnimation.fromTo(allclouds, 120.2, {x: -900, y: -1200}, {x: 400, y: 1600}); function init() { TweenLite.set($(".label"), {visibility:"hidden"}); } init(); totalProgressSlider = $("#totalProgressSlider") .slider({ range: false, animate: true, min: 0, max: 100, step:.3, slide: function ( event, ui ) { tl.totalProgress( ui.value/100 ); var topValue = -((100-ui.value)*difference/100).animate(); } }); function updateUI() { totalProgressSlider.slider("value", tl.totalProgress() *100); } $("#totalProgressSlider, .ui-slider-handle").mousedown(function() { $('html, #totalProgressSlider, .ui-slider-handle').one("mouseup", function(e){ tl.resume(); }); }); rowBtn.click(function() { tl.tweenTo('row', {ease:Bounce.easeInOut}).timeScale(16); }); topsoilBtn.click(function() { tl.tweenTo('topsoil', {ease:Bounce.easeInOut}).timeScale(16); }); trenchingBtn.click(function() { tl.tweenTo('trenching', {ease:Bounce.easeInOut}).timeScale(16); }); CSSPlugin.defaultTransformPerspective = 600; TweenLite.set([main], {rotationX:0}); TweenLite.set("h2", {autoAlpha:0}); I found this example: http://codepen.io/rhernando/pen/Batoc but how to I get it to update with the timeline progress?