Jump to content
Search Community

Hysteresis

Premium

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by Hysteresis

    Arrow Grow Animation - can't get it to work right with MorphSVG

    in GSAP

    Posted

    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!

    See the Pen ZWOVvO by dchadney (@dchadney) on CodePen

    Timelines not working in Firefox 35.0.1

    in GSAP

    Posted

    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

    in GSAP

    Posted

    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!

    See the Pen JopNjP by dchadney (@dchadney) on CodePen

    Scaling an element becomes pixelated

    in GSAP

    Posted

    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: 

    See the Pen fojIb by dchadney (@dchadney) on CodePen

    How can I add onComplete to tl.reverse()?

    in GSAP

    Posted

    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()?

    in GSAP

    Posted

    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

    in GSAP

    Posted

    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:

    See the Pen uCFje by dchadney (@dchadney) on CodePen

    Slider control using jQuery UI is jumpy

    in GSAP

    Posted

    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:

    See the Pen Batoc by rhernando (@rhernando) on CodePen



    but how to I get it to update with the timeline progress?

×
×
  • Create New...