Search the Community
Showing results for tags 'complex'.
Found 5 results
-
I don't have a working example, as I just NPMd 3.0 and grabbed the 149/year club a couple hours ago. I'm used to framer / motion.react. I'm looking for... A rubber duck. Attached is a simple Google searched SVG pitch fork. The best way I can describe my drawing is: flip this 180 and attach another fork on each end. Ok, so. I'm a developer, and i would rather start off the right way vs trial and error. Abstraction is my thing. I wish there was a visual editor, but I can f5 my way to success in NextJS. For the project: think 100 lines, 8k pixels height easy. I'm only using lines, and here are my immediate questions-- Where should I break the lines on the fork? (Handle, edge, 4 prongs? 1 center line and start the prongs when they hit?). Do you need to mask? How would I start the animations of each prong at the same time when the handle is finished? How do I get a consistent draw speed/flow in varying length lines? I'm not drawing a maze, but that's another way to think about it. I'm interested in the approach more than a codepen, but I wouldn't say no to one. Like.. fromTo vs to and all this new stuff.
-
Hi Everyone!, I am trying to accomplish an effect using GSAP where the scale of the letters (SPECTER) goes from 40 to 0.2. I want the scale to occur from the letter 'C' so we see the whole video at first and then the scale goes down to reveal the words 'Specter'. I am having an issue calculating so the effect starts from the C exactly. As you can see above I have added a calculation for the transform so its (transform: 'calc(50% - 18px), 50%) 50% being the middle and 18px being the distance between both points in C. I would like some guidance on how this can be achieved using GSAP. It is very similar to this other codepen (https://codepen.io/justjoinednow/pen/MWVBQZg) Thank you
-
Hi all, We made an animation for our new website (check codepen) and notice extreme high CPU load when displaying the animation. We tried simplifying the animation but it didn't really work. Any tips or advice on how to lower the cpu usage because we know svg animation is a high on cpu but on slower pc's it sounds like we are going to take off Any help is appreciated! https://cdpn.io/Vonwelzen/pen/ZEbNrLX
-
Hey all - As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix. I am pretty satisfied at this point. The only other things I was struggling with were... 1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in $(".blue-uxd:not(#diamond)").hover(function(){ joinButton.hide(); uxdButton.show(); 2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from black to blue. Could I use a switch or something that only activates if the diamond reaches the top/floating step? TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 3) And when I hover over the "X/A" the " join button fades out and the "What are you waiting for?" fades in right after... $("#xa-flip").hover(function(){ button.hide(); uxdButton.hide(); joinButton.hide(); hiddenButton.hide(); joinButtonActive.show() TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0}); TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0}); joinButtonActive.hide(); hiddenButton.show(); }, function(){ joinButtonActive.hide(); hiddenButton.hide(); button.show(); joinButton.show(); }); thank you very much, nick
-
Hi, I am now testing my apps on 4k displays as these become more common. Using TweenLite: I am having an issue with the performance of a tween that occurs only when very high res displays are used. I am testing on 2560x1600 with the object in question spanning 2500px wide and 500px height, running on a core i7 high spec machine. The tween is simply a 0.5 second tween to alpha 0 and back again. The fade out is clearly running at around 4 to 6 frames per second. The object that is causing the performanc issue is a wood effect complex vector (as attached). With this layer removed from the animated object performance is perfect. I tried making the vector more simple and using optimise, with some very small improvement but nothng significant. In fact I tried making the vector 6X more complex and it was a little slower but not 6x as much. Anyone any ideas on how to improve this. Thanks Complex_vector.zip
