Caroline_Portugal

I appreciate you guys looking into this, thank you!

Hi guys, this animation works great in Chrome but is super choppy in Safari: https://codepen.io/carolineportugal/pen/PoLVomB Any ideas on how to fix the issue? Any help is much appreciated! Caroline

Thanks for all these explanations—all very useful. You guys are the best.

Hey PointC, thanks so much for these tips. It looks like the slight rotation did the trick, not sure why. ?

Hi, I've animated this design in CodePen (https://codepen.io/carolineportugal/pen/BapBerO) 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

This is great, thanks so much for taking the time to point me to 2 different, and equally great, solutions!

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

Thanks so much, guys. I tried duplicating and adjusting the path-shapes to get the effect I need, but it's not going to work. I guess I really need support for mask-composite. Will use the suggestion from Mikel as an alternative take on this.

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.

I'd like for the dark-blue shape to be shown only when the two outline paths intersect. (Right now it is shown if either one of the paths moves over it). I'm having a hard time understanding how to make this work. I'd appreciate any help. Thanks! Caroline

Second time you nail the answer for me. Thanks so much, PointC!

Hey Carl, thanks for your reply and here's a simplified CodePen version: http://codepen.io/carolineportugal/pen/mAYakJ 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!

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(); } });

Point C, this is perfect now! I hadn't thought there were basically two timelines going on at the same time... Thanks so much!

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, http://codepen.io/carolineportugal/pen/LkraEx?editors=0010