en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en fr en en en en en en en en en en en fy en en en en sv en en en en en en en en en en en en en en sv de en nb en de en hy en en en en en de en nb en de en hy en en en en en ru en nb en ru en en en en en en en ru en nb en ru en en en en en en en ms en en en en en en ms en en en en en en ms en en en en en en fr en en en en en en fr en en en en en en fr en en en en en en fr en en en en en en fa en nb en fa en en en en en en en fa en nb en fa en en en en en en es en fr en en en de en eu en en en de en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Hysteresis started following Arrow Grow Animation - can't get it to work right with MorphSVG and Help with scrollTrigger and DrawSVG March 28
Hysteresis posted a topic in GSAP
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
Hysteresis replied to Hysteresis's topic in GSAP
Hysteresis posted a topic in GSAP
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!
Timelines not working in Firefox 35.0.1
Hysteresis replied to Hysteresis's topic in GSAP
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(); });
Timelines not working in Firefox 35.0.1
Hysteresis posted a topic in GSAP
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!
Scaling an element becomes pixelated
Hysteresis replied to Hysteresis's topic in GSAP
Wow, thank you for digging into this and figuring it out. That is very helpful. SOLVED!
Scaling an element becomes pixelated
Hysteresis replied to Hysteresis's topic in GSAP
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
Scaling an element becomes pixelated
Hysteresis posted a topic in GSAP
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
How can I add onComplete to tl.reverse()?
Hysteresis replied to Hysteresis's topic in GSAP
Good idea, awesome thank you. That worked perfectly!
How can I add onComplete to tl.reverse()?
Hysteresis replied to Hysteresis's topic in GSAP
I suspect that I would use this: onReverseCompleteParams:["param1", "param2"]} ?? but I don't know how to reference these parameters in my click event...
How can I add onComplete to tl.reverse()?
Hysteresis replied to Hysteresis's topic in GSAP
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"; };
How can I add onComplete to tl.reverse()?
Hysteresis posted a topic in GSAP
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?
Slider control using jQuery UI is jumpy
Hysteresis replied to Hysteresis's topic in GSAP
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
Slider control using jQuery UI is jumpy
Hysteresis posted a topic in GSAP
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?
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“Sincerely, the people behind GSAP are sorcerers”
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“@greensock is just pure awesomeness. What more can be said?”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.