Jump to content
Search Community

Caroline_Portugal

Members

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Posts posted by Caroline_Portugal

    animation is laggy, page is slow

    in GSAP

    Posted

    Hi, 

     

    I've animated this design in CodePen () but when I use this code on a one-page website (no pictures, just text), the animation is laggy, will flicker sometimes, and will freeze the page for a second when I try to scroll down through it. 

     

    What should I look into for optimizing this animation? I really want to use it, but don't think I can in this state. 

     

    Thanks so much for any suggestions, 

     

    Caroline

     

     

    See the Pen BapBerO by carolineportugal (@carolineportugal) on CodePen

    different translation duration for each circle

    in GSAP

    Posted

    Currently, all circles will update their direction (repeatRefresh) at the same time, after the set duration. Is there any way I can get a more organic feel and have the update in direction happen at different times for each circle? In other words, the circles would start moving at the same time but would update direction at different (random?) times. I tried 'staggerTo' but couldn't manage to get it to work. 

     

    Thanks for your help once again!
    Caroline

    See the Pen wvzWbWa?editors=0010 by carolineportugal (@carolineportugal) on CodePen

    How to animate the intersection of paths

    in GSAP

    Posted

    Hey Mikel, thanks for the quick reply!

     

    With what you're suggesting, the blue shape would only be shown at the final state of the two outlines intersecting. 

     

    I need the blue shape to start being shown the instant the two outlines start intersecting—and only where the two shapes are intersecting.  

    Kill tweens on resize and reset starting position

    in GSAP

    Posted

    Hey Carl, thanks for your reply and here's a simplified CodePen version: 

     

    See the Pen mAYakJ by carolineportugal (@carolineportugal) on CodePen

     

    What I need is for: 

     

    01. animation to load when landing on larger screen size (currently working);

    02. animation to not be triggered when landing on smaller screen size (currently working); 

    03. animation to stop and reset to "0" when resizing to a smaller screen size (currently not working);

    04. animation to load again when resizing to a larger screen size (currently not working); 

     

     

    Thanks again -- I've been having some difficulty understanding 'killing' and 'restarting' animations according to screen resize for some time now, so I appreciate any kind of help!

    Kill tweens on resize and reset starting position

    in GSAP

    Posted

    Hey guys, this should be a breeze for you all, but my knowledge is limited: on screen resize, I want to kill all tweens (and timeline). I used killAll, which did it partially. The problem is whenever the screen is resized the animation stops midway, when I want is for it to be set to the initial position, as if the animation were never triggered. 

     

    Thanks for your help!

    function animations(){

  var rotationOne = new TimelineMax()
  rotationOne.to("#box3",1.5,{rotation:-3,transformOrigin:"100% 50%", ease:Power1.easeInOut})
             .to("#box3",1.5,{rotation:3,transformOrigin:"100% 50%", ease:Power1.easeInOut,repeat:-1,yoyo:true});

  var rotationTwo = new TimelineMax()
  rotationTwo.to("#box4",1.5,{rotation:-3,transformOrigin:"0% 50%", ease:Power1.easeInOut})
             .to("#box4",1.5,{rotation:3,transformOrigin:"0% 50%", ease:Power1.easeInOut,repeat:-1,yoyo:true});

  var rotationThree = new TimelineMax()
  rotationThree.to("#box2",1.5,{rotation:1,transformOrigin:"50% 100%", ease:Power1.easeInOut})
              .to("#box2",1.5,{rotation:-1,transformOrigin:"50% 100%", ease:Power1.easeInOut,repeat:-1,yoyo:true});

  var blink = new TimelineMax()
  blink.to(".jazz-blink",0.3,{opacity:0, ease:Power1.easeInOut})
       .to(".jazz-blink",0.3,{opacity:1, ease:Power1.easeInOut, repeat:-1,yoyo:true});

  var rotateX = new TimelineMax()
  rotateX.to(".band1",2,{rotationX:360, transformOrigin:"50% 50%", ease:Linear.easeNone, repeat:-1,yoyo:true});

  var rotateXBack = new TimelineMax()
  rotateXBack.to(".band2",2,{rotationX:360, transformOrigin:"50% 50%", ease:Linear.easeNone, repeat:-1,yoyo:true});

  var rotateY = new TimelineMax()
  rotateY.to(".spine",2,{rotationY:360, transformOrigin:"50% 50%", ease:Linear.easeNone, repeat:-1,yoyo:true});

  TweenMax.set(".rectangle", { x:-803.4 });
  var slideMain = new TimelineMax()
  slideMain.to(".rectangle",4,{x:0,transformOrigin:"0% 0%", ease:Linear.easeNone})
           .to(".rectangle",4,{x:-803.4,transformOrigin:"0% 0%", ease:Linear.easeNone,repeat:-1,yoyo:true});

  var slideSmall = new TimelineMax()
  slideSmall.to(".line",2,{x:-140.4,transformOrigin:"0% 100%", ease:Linear.easeNone})
            .to(".line",2,{x:0,transformOrigin:"0% 100%", ease:Linear.easeNone,repeat:-1,yoyo:true});

}


if ($(window).width() > 768) {
  animations();
}

$(window).resize(function(){
    if($(window).width() > 768){
      animations();
    } else {
      TweenMax.killAll();
    }
});

    Reposition animation on screen resize

    in GSAP

    Posted

    Hey Carl, 

     

    Thanks so much for getting back to me. I have spent quite some time on this but still not getting what I want (I am sorry, I am poorly alphabetized in JS). I have tweaked your pen to show you what I'm trying to do. It's basically a timeline with an object moving after the other object is finished moving. This works fine until the screen is resized. 

     

    After a few screen resizes it all gets buggy, with objects moving at various times, not when the other is finished. Not sure what else to try.

     

    Thanks so much again for your help, 

     

    See the Pen LkraEx?editors=0010 by carolineportugal (@carolineportugal) on CodePen

    Is Immediate Render the solution?

    in GSAP

    Posted

    Hey guys, first I'd like to say I am in love with GSAP. I am new to the product but have been so incredibly impressed with it and the amazing community. I'm definitely sticking with GSAP at work now. 

     

    Here's a little logo I want animated on mouse over: 

    See the Pen OyMbva by carolineportugal (@carolineportugal) on CodePen

     

    I am having two problems with it:

     

    1. I'd like the start position of the sea to be 0. I don't understand why, even with the animation not having started, the starting position has already changed.  

    2. On mouseover/mouseout there's a strange flickering of the sea's position. 

     

    Basically what I'd want to happen is on the first mouse over the sea goes from 0 to 60 but after playing once it'd only oscillate between 60-30, 30-60. So 'seaStart' would only be played on the first mouse over but not on the consecutive mouseovers. 

     

    Thanks so much for any help you guys can give!

     

     

     

×
×
  • Create New...