Leaderboard


Popular Content

Showing most liked content since 06/24/2017 in all areas

  1. 8 likes
    You can't animate most flexbox values because they're words, e.g. flex-start, space-around, column-reverse. You can't say, animate to column reverse. The browser has to do the layout. But that's actually a good thing as that's one less thing you have to calculate. To do a flexbox animations, start off by recording the position of your element in it's current state. Now change its flexbox style and let the browser reposition it. Now record the new position of your element. You now know where the element was, and where its supposed to be. Now move your element back to it's old position and animate it to it's new position. This all takes place in between animation frames, so you won't see the jump. This technique will work for every flexbox property. It will actually work for any type of layout that the browser handles, like the new CSS grid. For more information, check out these threads.
  2. 8 likes
    Hi dear community! I know you missed new releases with HERO banners. Today I present 3 of them! Please give us feedback if you like them. 1. World Of Tanks — Take Control Animation here 2. World Of Tanks — Video 360° Animation here 3. World Of Warships — Dunkirk Collaboration Animation here Thank you!
  3. 7 likes
    Hey @kvnmcwebn! I think you are overcomplicating things here. There's a simple way around it with minimal code. Try changing the following: From this: <div id="head" style=" margin-bottom:-100px; z-index: 9999; top:50; left: 100; "> <h1 style="color: #ffffff;"> Some Text Here<h1> </div> <svg>...</svg> To this: <svg>...</svg> <div id="head" style="top:50px; left: 100px; position:absolute"> <h1 style="color: #ffffff;">Some Text Here<h1> </div> The browser reads and parses the code from top to bottom so, if you want to have something sitting on top of something else, you should always first have the relevant code doing so. There's no need to have z-index involved if you can get the same result by just altering the order of you HTML. And since you are making things responsive, I would also recommend wrapping those two elements in another tag and having its position set as relative. That is because absolutely and fixed positioned elements are always aligned to the first parent element with a position:relative which, might not always produce the desired effects if you do not set one yourself. <div style="position:relative"> <svg>...</svg> <div id="head" style="top:5%; left:10%; position:absolute"> <h1 style="color: #ffffff;">Some Text Here<h1> </div> </div> Note that I have changed the top and left to percentages. And that you forgot to add the unit (px) in your original code. I've also seen that you are trying to tween a boolean value somewhere in your code as you have the following error in the console: 'invalid randomize tween value: true'. You might want to check that out. Other than that, good job, this project of yours is shaping up quite nicely. Happy Tweening!
  4. 7 likes
    Hi @kvnmcwebn Have you seen these pens by @chrisgannon ? He's creating those speed lines in a loop with the drawSVG plugin. That plugin is a Club GreenSock bonus, but you can experiment with it on CodePen. Here's some more info about the Club. https://greensock.com/club Hopefully that helps a bit. Happy tweening.
  5. 6 likes
    @icdindia When you run out of RAM, it will use swap space on the device's internal memory (virtual memory), so that may not be the issue. But if different devices are constantly crashing without error logs, that should be huge red flag that your app is causing some sort of catastrophic failure. It takes a lot to cause a mobile device to crash. Take a look at my task manager. Your app is at the top, and is completely off the charts. It should not be using that much CPU, GPU, or memory, especially when there is nothing really moving around on the screen. And here is what the FPS Meter looks like in Chrome. 84MB of GPU memory? Again, that is completely off the charts for what you're doing. So what's going on behind the scenes? Here's what I recorded in the performance timeline. The purple areas of the graph show when the browser is rendering. It's constantly rendering, even when there is nothing really moving around on the screen. I don't know what it's rendering, but it sure is busy. Probably dealing with those 22,000 nodes your app created. Where or what those nodes are doing is beyond me, but they're most likely coming from that huge memory leak shown on the blue lines with the garbage collection. When you see sawtooth or steadily increasing patterns in your memory timeline, that's a good sign you have a memory leak. So now the question is where and why these problems are happening. I tried to run your code through TypeScript to point out the errors, but it couldn't parse all of your code because there's a bunch of invalid code in it. It was able to parse enough to point out a bunch of global variables, which are can cause all sorts of trouble. That's probably where a lot of your problems are originating from. Timelines are designed for playing animations in a sequence, but your app is not linear. You can jump around to any part of it. So you're filling your memory up with animations and elements that might never be accessed. That'd be like going to Google Maps, and having it load the entire world before you could use it just in case. At this point, I think you might be better off by just starting over. Trying to root all these problems seems like it might not be worth it.
  6. 6 likes
    Here's some pseudocode to center something. var x = (viewWidth - targetWidth) / 2; var y = (viewHeight - targetHeight) / 2; So calculate the x, and use that as the offset in your tween. TweenMax.to(window, 2, {scrollTo:{x:"#target", offsetX: someCalculation }}); Anything more complicated than that and you'll probably need to build your own camera system.
  7. 6 likes
    Hi kayhan80, Welcome to GreenSock Forums. I´m not sure if I understood your case correctly. My interpretation is like this CodePen: If that´s not a solution you expect it would be great if you provide a reduced CodePen showing your purpose. Kind regards Mikel
  8. 6 likes
    Hi @Chris, Like @Carl said, canvas is definitely the way to go for particle animations. If you've never used canvas before, a library like Pixi.js might be the best way to get started. It uses an API similar to Flash, and is focused on moving things around the screen as quickly and efficiently as possible. I converted your demo over to Pixi. I created 15 different particle waves with 1000 particles in each one. When you mouse over the canvas, it will play a different particle wave, that is of course if all 15 aren't playing at the same time. It checks to make sure the timeline for a particle wave is not active before calling restart on it. The particles are being rendered at the speed of light.
  9. 5 likes
    It's gone totally off-topic now but I do want to get my hands (fingers?) dirty with it. But wait... I have to master ThreeJS, React, WebPack, SVG, GSAP, PIXI.js, PaperJS, ServiceWorkers, IndexDB, VUE, first. And answer enough questions in a cool manner here to I can stay in the leaderboard.... Oh my. Better drop my job, claim benefits to eat if I am to have the time for all of this.
  10. 5 likes
    You're a Shockingly Green Club member so you should be able to click on your profile and there should be a zip download in your dashboard with all the bonus plugins. It should be something like: GSAP with Shockingly Green bonus (1.20.2) Click that and unzip it to your local development folder and you should be good to go. You can use the CDN links for TweenMax and non-club plugins, but all those bonus plugins will have to be hosted with your project files. Happy tweening.
  11. 5 likes
    Hello @webbersites and welcome to the GreenSock Forum! I only had time to look at your site a little Keep in mind that when you animate CSS properties like height and font-size that regardless of which browser you will see that choppy evil. This is due to the browser having to affect layout and only animating on a sub-pixel level witgout snapping. The elements will animate with jank (lost frames) .. aka choppy and jitter city. But regarding your image choppy animation .. that is due to the very large image your trying to animate. Most of those images are like 2000x1092 in dimensions. And the size of them are almost a half a megabyte. That will cause a lot of painting for such a large dimension image.. as well as taking a while to load the page which i saw when i went to your website. You could try to isolate your code to just the issue your seeing to help us help you figure this out. You could also try and add a slight rotation like 0.01 to the tween animating x to help it animate smoother TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30, rotation:0.01}}); // slight rotation can help with choppy Also inspect your elements animating and make sure they are animating using matrix3d() instead of matrix() for the CSS transform property. But please create a reduced codepen example so we can test the code you are having an issue with instead of havig to debug your whole site. Thanks
  12. 5 likes
    A big difference is that a CustomWiggle always ends where it begins, whereas a tween using a RoughEase will have unique start and end values.
  13. 5 likes
    If it works for TweenLite, it will work for TweenMax. I bet if you removed the ease config from the tween, you would find your problem.
  14. 5 likes
    I just switched this line of code out to create clones. // var hero = document.createElement("gsap-hero"); var hero = baseContainer.cloneNode(true); hero is the div/container. If you wanted to selected something inside the hero div, just use "hero" instead of "document" for querySelector/querySelectorAll. // Select all the paths inside hero var paths = hero.querySelectorAll("path");
  15. 5 likes
    Hi @rgfx! We meet again! GSAP will initiate and make all the calculations for your Tween/Timeline, will store it and re-use them whenever it is called to play() or repeat(). So, it doesn't matter if you are using a function to generate a random number because it will only be called once - at the initialisation of the Tween/Timeline. In order to have a Tween/Timeline give you random movement onRepeat, you need to make a new Tween/Timeline every time you need a new random value. You wouldn't even need clearProps if you are using the yoyo property as you will always end up back at the start, no need to reset anything. Well, that what @PointC has said, basically... That cheeky sneaky opportunist... Let it be known that @PointC has stolen this answer under my nose, while I had it claimed. Any likes given to him should be nullified! You sir, @PointC, I shall get you after school...
  16. 5 likes
    Hi @A7DC Welcome to the forum. You can animate the strokeWidth, but since the stroke is center aligned, it's probably not going to be the effect you want. I'd recommend using the attribute plugin and animating the radius of the circle. Something like this: TweenMax.to(yourCircle, 0.25, {attr:{r:50}}) More info about the attr plugin: https://greensock.com/docs/Plugins/AttrPlugin Happy tweening.
  17. 5 likes
    Hi vibhor4all, Welcome to GreenSock Forums. You could use the window.onload event handler to start your animations everything in the DOM is loaded, ie, scripts, text, images, etc.. Regarding opacity: try to use css visibility:hidden and autoAlpha - see #four and #box in the example below. autoAlpha: if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Hopefully that´s will help ... If you are still having an issue. Then please setup a reduced CodePen showing the issue so we can analyse your case: https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening Mikel
  18. 5 likes
    Hi @emilychews I think you should be able to return the timeline from the function and feed that to ScrollMagic. Here's a quick example: Hopefully that helps. Happy tweening.
  19. 5 likes
    Hello Again autoAlpha should actually help with performance due to the nature of how opacity works with the visibility property. So i dont think its autoAlpha causing this. When your testing.. are you testing in codepen? If you are makes sure you are viewing your codepen in codepen's Full Page mode so it doesnt load your pen in an iframe. https://codepen.io/szsoma/full/vZgxmq/ Also if your are seeing this when testing in codepen, try using the Export button (located in the bottom right corner of codepen) and download your codepen so you can run it locally outside of codepen. Codepen is notorious for not performing so hot due to the high volume on their website. And one last thing since you are animating SVG, you cant take advantage of hardware acceleration of 3D transforms. This is due to SVG not supporting 3D. So right now your elements are animating using matrix() instead of matrix3d() for the transform attribute. SVG 2 will support 3D transforms fully but we have to wait for that to come out. You could also try and optimize your SVG code to make sure its optimized tight as possible: https://jakearchibald.github.io/svgomg/ Just remember to toggle Clean IDs off.
  20. 5 likes
    You're right @Dipscom - no one has time to learn everything... at least not in the traditional ways. I've had a team spying on Blake for a few months and they've finally discovered his secret. He learns everything in seconds though his headjack. I've managed to procure photographic evidence of this process.
  21. 5 likes
    Using NPM scripts do make sense... but I don't feel like learning all those commands and flags. I need a GUI! This playlist might be a good place to start learning some of the new features.
  22. 5 likes
    Sweet demo Anthony!!! always good to see you coming back with awesome stuff!! For performance I would try to avoid using the elastic easing on all the thumbnails when clicking on the expanded image, I would go with a regular easeOut function, perhaps Power2 and use the elastic on the expanded being scaled down. For using react create app, I can't help you. I've baked my own start packages for working with react, angular, vue, etc. so I never use those tools. Also I've never been a big fan of this bundling madness that has taken over front end development, so even today sometimes I keep GSAP outside the bundled files. This is particularly useful when you end up with a bundled file over 1MB because you can create a pre-loader with GSAP. I'm sure Blake can give you some pointers in this regard. I see you're using timescale to speed up/down the animation using the pointer position. But also I saw this: TweenMax.to(this.timeline, currentFace.progressRemaining / 2, { time: this.timeline.getLabelTime(currentFace.id.toString()), ease: 'Back.easeOut', }); Why don't you create one TweenMax instance to rotate to each side, just like the one you already have, using relative values and a repeat:-1 with linearEaseNone in order to create an endless loop, or you can use the modifiers plugin as well, and based on the pointer position update the timescale between 0 and 1 like that you avoid code like the one above and keep it more simple. You can even put those GSAP instances in your component's state or even a redux store and just reference them. Finally I don't know how the GSAP instances could be messing with the App's state. As a rule of thumb, I try to avoid GSAP updating any property of the app's state that could mean a re-rendering that ultimately will affect the instance. If the GSAP instance will update something in the state, is vital that nothing else does because GSAP won't know about that and will keep going with the stored values, unless you reset and create the instance again. For example if a Tween is changing the X position of an object and is not entirely necessary to store that value in the state then don't, in order to avoid something that could mess that up. In your sample I can't see if the GSAP instance is updating anything from the state, so I'd need for you to tell me that. This is very simple examples of some things I made with react some time ago: In this basically GSAP just animates the DOM element and doesn't even know about the app's state. This is using a delayed call and the Tween updates a specific part of the state that nothing else can update. Finally with the button you can change another state property. Finally this is using the modifiers plugin: Hope that this helps. Best, Rodrigo.
  23. 5 likes
    Hello @RolandSoos and Welcome to the GreenSock Forum! In GSAP you don't need that custom function for CSS filter. Best to keep it simple with less code. You can just include both webkit and standard filter blur() CSS property and GSAP will apply both when needed. Latest Firefox now understands webkit-filter even if filter is not used. GSAP will use the -webkit-filter when needed for mobile chrome/safari on older android and iOS devices as fallback. Also in order to bring filter blur() back to 0, its best to add a set() method at the start of timeline var instance. Check out this example: You can see the changes i made below: var timeline = new TimelineLite(), timeline2 = new TimelineLite({paused: true}); // set filter blur(0px) at the begining of timeline even if restarted timeline.set(".red",{ filter: "blur(0px)", "-webkit-filter": "blur(0px)" /* GSAP will use if needed */ }); timeline.fromTo( ".red", 3, { x: 0, autoAlpha: 0 }, { x: 0, autoAlpha: 1, onComplete: function(){ timeline2.play(0); } } ); timeline2.to( ".red", 3, { filter: "blur(5px)", "-webkit-filter": "blur(5px)", /* GSAP will use if needed */ x: 200, } ); $('.red').on('click', function(){ timeline.invalidate().restart(); }); SVG filter blur is more widely supported than CSS filter. You will also notice i changed opacity to autoAlpha for better performance. You will also notice i added the CSS property visibility: hidden to the .red CSS rule. CSSPlugin Docs - autoAlpha property: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Resource: GSAP set() : https://greensock.com/docs/TimelineMax/set() CSSPlugin autoAlpha : https://greensock.com/docs/Plugins/CSSPlugin Happy Tweening
  24. 5 likes
    Is this SVG, canvas or just some DOM elements? You should be able to set up a mask or clip-path for that text pretty easily and move it into position. Here are a few pens that may help. Happy tweening.
  25. 5 likes
    Hello @Moo and welcome to the GreenSock Forum! This looks more like a question on regular JS, instead of how to use the GSAP API. But you could get the hash in the browser url location bar. Store it as a variable and then trigger the click handler id name with that hash. // cross browser event auto trigger click event function triggerClick(el){ if (document.createEvent) { var mEvt = document.createEvent('MouseEvents'); mEvt.initEvent('click', true, false); el.dispatchEvent(evt); } else if (document.createEventObject) { el.fireEvent('onclick'); } else if (typeof node.onclick == 'function') { el.onclick(); } } // auto click tab when hash is present in url browser bar if(window.location.hash) { var hash = window.location.hash.substring(1), // puts hash in variable, and removes the # character tabTarget = document.getElementById(hash); // create id selector triggerClick(tabTarget); // auto click tab via vanilla JS // or if you use jQuery to auto click tab // jQuery("#"+tabTarget).trigger("click"); } Resource: window.location: https://developer.mozilla.org/en-US/docs/Web/API/Window/location jQuery trigger(): http://api.jquery.com/trigger/ Happy Tweening
  26. 5 likes
    Hi jjvera, please take this line: element5.innerHTML = obj5.value.toFixed(1).toString().replace(".", ",");
  27. 5 likes
    I wasn't going to add anything, but since you brought it up, here's how I would do it. Imagine the wheel from the its side. It's a regular a polygon, which means you can figure out it's radius. http://mathopenref.com/polygonradius.html http://www.mathsisfun.com/geometry/regular-polygons.html Once you figure out the radius, you can rotate the vertices for each polygon face inside an animation. Each face can then be mapped back into its 1D front view by comparing the top and bottom y-coordinate. If the bottom value is greater than the top, that means the face is upside down, and is on the backside, so it won't be visible. Well, that's how I would do most of it... but don't wait around for me. It's your turn to do make a demo, which I will need to see by close of business today.
  28. 5 likes
    Step 4 Create a fadeInOut animation with the same timing as the movement tween. Since I need a single tween that starts at opacity:0 goes to opacity:1 and then back to opacity:0 I decided to create a customEase. In order to understand this step, you must first completely understand how an ease works. I decided to use an ease that looks like this: you'll notice it stays stuck at max value for a little bit (flat part up top). I also tried a more linear ease like: They are both in my final CodePen as: CustomEase.create("quickPulse", "M0,0 C0,0 0.231,0.062 0.358,0.3 0.497,0.561 0.472,1 0.472,1 0.472,1 0.536,1 0.536,1 0.536,1 0.542,0.514 0.642,0.302 0.735,0.101 1,0 1,0"); CustomEase.create("linear", "M0,0 C0,0 0.073,0.162 0.2,0.4 0.339,0.661 0.5,1 0.5,1 0.5,1 0.663,0.666 0.796,0.382 0.889,0.181 1,0 1,0"); You can definitely get some wild effects by just playing with the ease. i would probably round off the top of my quickPulse (ease 1) just to smooth it out a little. I added the opacity tween at the same time like so: $("text").each(function(index,element){ master.to(element, duration, {y:-475, ease:Linear.easeNone, repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset); master.from(element, duration, {opacity:0, ease:"quickPulse", repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset) }); feel free to change ease:"quickPulse" to ease:"linear" to see the difference.
  29. 4 likes
    Hello @jesper.landberg You can certainly reference objects stored in attributes and values with GSAP But the code the way you have it now wouldn't work due to the object outputted tweens will be malformed in syntax due to extra squiggly brackets. { } You would have to do something like the below example // this will work this.state = { enter: { yPercent: 25, xPercent: 25, alpha: 0, skewX: -10 }, neutral: { yPercent: 0, xPercent: 0, alpha: 1, skewX: 0, ease: Expo.easeOut // added so its in the object }, leave: { yPercent: -25, xPercent: -25, alpha: 0, skewX: 10 } } var el = document.getElementById("el"); TweenMax.fromTo(el, 0.5, this.state.enter, this.state.neutral ); /////////////////////////////////////////////////////////////////////// // OUTPUTS: // GOOD - output of the tween when parsed will be proper syntax TweenMax.fromTo(el, 0.5, { yPercent: 25, xPercent: 25, alpha: 0, skewX: -10 }, { yPercent: 0, xPercent: 0, alpha: 1, skewX: 0, ease: Expo.easeOut // ease is included in the neutral object } ); Otherwise your code would look like this which is malformed syntax // this will not work this.state = { enter: { yPercent: 25, xPercent: 25, alpha: 0, skewX: -10 }, neutral: { yPercent: 0, xPercent: 0, alpha: 1, skewX: 0 }, leave: { yPercent: -25, xPercent: -25, alpha: 0, skewX: 10 } } TweenMax.fromTo(el, 0.5, { this.state.enter }, { this.state.neutral, ease: Expo.easeOut }) /////////////////////////////////////////////////////////////////////// // OUTPUTS: // BAD - output of the tween when parsed will be malformed syntax TweenMax.fromTo(el, 0.5, { { // extra squiggly brace - malformed yPercent: 25, xPercent: 25, alpha: 0, skewX: -10 } // extra squiggly brace - malformed }, { { // extra squiggly brace - malformed yPercent: 0, xPercent: 0, alpha: 1, skewX: 0 }, // extra squiggly brace - malformed ease: Expo.easeOut }) Example of javascript object literal in a for loop with GSAP Happy Tweening!
  30. 4 likes
    Hello @icdindia I don't think this has to do with GSAP, but looks like your issue is all 12 of those animated gif's you have on the page. chapter1.gif chapter2.gif chapter3.gif chapter4.gif chapter5.gif chapter6.gif chapter7.gif chapter8.gif chapter9.gif chapter10.gif chapter11.gif chapter12.gif Most of the animated gifs have dimensions of 200x200 (displayed at 40x40) with around 100 frames in each gif. That is a crazy amount of frames to have the browser play along with several other 100 frame animated gifs. Those gif's should really be resized to be the original size of 40px by 40px in Photoshop, like you have in your markup. Your loading a bigger animated gif then what you need. Animated gifs are resource hogs, especially on mobile, and especially with such a high amount of frames repeating forever. Keep in mind that when you load animated gif's into the page that they will immediately start to cycle (play) through their timeline regardless if they are hidden or have display none. Firefox is one of the only browsers that will actually stop the animated gif timeline when not visible. Whereas other browser like Chrome, IE, or MS Edge will keep your animated gifs animating even when hidden, causing wasting of RAM memory and other resources. I bet if you comment out or remove all those animated gifs you will see an improvement in your site performance and not have all those memory leaks. Also do you really even need the animated gifs? With the size they are you cant even make out what is happening in the animated gif so in my opinion you cant even make out what is animating in the animated gif. Just my observation and two cents
  31. 4 likes
    I like the idea of making ScrambleTextPlugin Emoji-aware. Here's a preview of the upcoming release (uncompressed): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js (only usable on codepen). Better? I didn't want to make it limited to ES6, so I did it differently under the hood. Let me know if that works well for you please. Codepen sample:
  32. 4 likes
    Hi @sygad1 Welcome to the forum. Is this what you need? Hopefully that helps. Happy tweening.
  33. 4 likes
    also please note that TweenMax.js includes TweenMax and all of these tools: TweenLite TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack So you don't need to load any of the above in addition to TweenMax https://greensock.com/tweenmax
  34. 4 likes
    After thinking about this, I guess you probably wouldn't want to destroy the ScrollMagic controller if they size below 1024 because they could size back up too. I'm assuming if they size back up you'd want the scroll trigger to work again, right? If that's the case, I'm thinking simply enabling or disabling the scene based on window size is probably the best solution for your needs. I didn't have a lot of time, but here's a quick fork of your pen that shows how to do that: This should work above 1024 and stop working below that width. One other thing you'll probably have to add is seeking back to 0 on the timeline if the user resizes after they've scrolled beyond the animation on the page, but this should get you started. Hopefully it helps. Happy tweening.
  35. 4 likes
    Hi @venn The stagger method returns an array of tweens. To see what I mean, please console.log your TweenA variable. If you want to pause/play a stagger like that, I'd recommend putting it on a timeline. Happy tweening.
  36. 4 likes
    Looks like @Dipscom is getting ready to drop some knowledge here, but I'll jump in quickly. If you're going to change the tween value on each repeat, I'd recommend creating it in a function and call it again upon complete rather than creating multiple infinite timelines and trying to clearProps . Something like this: You can also take advantage of function based values for your rotation. Here's some more info about that: https://greensock.com/1-19-0/ Hopefully that helps. Happy tweening.
  37. 4 likes
    HI @martis The last info I've read was @OSUblake's post here: You've probably seen these links too: https://greensock.com/will-change https://bugs.chromium.org/p/chromium/issues/detail?id=596382 Happy tweening.
  38. 4 likes
    This can get really complicated. Creating clones is not the issue. It's how to handle dragging something in and out of containers that scroll. I made a rough demo of how this might work a while ago. The hard part is figuring out if the user want the container to scroll, or are they trying to remove the item from the container as those are mutually exclusive actions.
  39. 4 likes
    Wow! Magic! I got the 60 fps. Thank you! Yes, I'm new in greensock (and web animation).
  40. 4 likes
    Keep in mind when testing performance / repaints through the browser, that you MUST test in Incognito (chrome) or private browsing (firefox) modes. Since not testing in those private modes can cause skewed results due to running extensions and other factors. Both Mozilla and Google Devs recommend this. Just my two cents
  41. 4 likes
    SVG doesn't support 3d. You can wrap your valve in a div and do it that way.
  42. 4 likes
    Simple Physics Using circle collision detection. It's super fast and really simple... 1500 particles. Performance should be really good. No tweens, timelines, or transforms are used in this one. I'm also going to start using ES6 classes as that's a better way to create objects.
  43. 4 likes
    Hi @christinesmith Welcome to the forum. A simple way to make that happen would be to use jQuery's wrap() after you split the text. You can then add a wrapping div around each of the newly created divs. Here's a quick example. Another simple option would be to run SplitText again on your newly created divs from the first split. Hopefully that helps. Happy tweening.
  44. 4 likes
    Manfred, thanks for jumping in. Kumaramulya, If you stay around the forums I think you will learn that there are very skilled and generous people willing to help with a very wide range of questions. For us to help you the best it really helps to know what your skill level is and what things you have tried. This is why we always ask for some sort of demo so that we can see where it is you need help and how deep we need to go with an explanation. You will also see that the moderators will put in a lot of time with people that show they are trying out the suggestions and have legitimate follow-up questions. We love seeing people actively engaged in the learning process. With our support being a free service to all users, there are limitations to what we can do. Please understand that it just isn't feasible for us build complicated demos on demand. Weekend support for the most part is for critical bug fixes for paying customers (Club GreenSock Members). But myself and other moderators will occasionally check in when they have the time. Posting a question once is sufficient. Someone will get to it as soon as they can. MorphSVG is really the best and easiest solution for what you want to do, I think you stumbled onto that already, but here's a video: However if you are good with plotting Cubic Beziers you can use BezierPlugin without MorphSVG. Here is a little demo: Spend some time putting a demo together (the simpler the better) and we'll do what we can to point you in the right direction.
  45. 4 likes
    Hello @ejlee and welcome to the GreenSock forum! Keep in mind that anytime you use autoAlpha is that you should add visibility: hidden to the element your tweening autoAlpha. This will prevent the brief flash your seeing of the element. And then autoAlpha will toggle the CSS property visibility: hidden to inherit and then animate opacity from 0 to 1. Please see the CSSPlugin Docs: https://greensock.com/docs/Plugins/CSSPlugin autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Here is an example of using autoAlpha
  46. 4 likes
    Hi iuscare, One option is 'clip path': https://css-tricks.com/clipping-masking-css/ Here a first draft with tweened clips - based on a pen of Blake Owen: For other options have a look to the comment of CRAIG: Try it and put some cream on it ...
  47. 4 likes
    The short answer is, yes! This isn't necessarily a single feature, but a combination of tricks that will get you what you need (i think). My solution hinges on CustomEase which allows you to use any SVG <path> as an ease curve. Read the CustomEase page for all you need to know about easing and CustomEase. The reasons I am tapping into CustomEase are 2-fold. CustomEase allows you to draw any curve you want (assuming it doesn't cross over itself) All eases have a getRatio() method which gives you a value based on progress For my example I created a custom ease that looks like this: EDIT curve here: https://greensock.com/ease-visualizer?CustomEase="M0,0 C0.083,0.294 0.214,0.596 0.468,0.82 0.588,0.926 0.752,1 1,1" I wrote some code that uses that ease curve to plot the x coordinate of 50 boxes that are stacked vertically I basically loop through each ".box" and use getRatio(index/numBoxes) to get a value between 0 and 1. I multiply that value by 250px so that the boxes actually move more than 1 pixel var curve = CustomEase.create("curve", "M0,0,C0.083,0.294,0.214,0.596,0.468,0.82,0.588,0.926,0.752,1,1,1"); var numBoxes = $(".box").length; $(".box").each(function(index, element){ TweenLite.set(element, {x:curve.getRatio(index/numBoxes) * 250}) } ) Since I'm modifying the x (horizontal) of the boxes you will have to tilt your head 90 degrees to the right to see how the curve matches the ease curve Now that I know that I can get a value along a path, I'm going to use the same technique to use that value for the absolute position (start time) of tweens in a timeline: $(".box").each(function(index, element){ tl.to(element, 1, {x:500, ease:Linear.easeNone}, curve.getRatio(index/numBoxes) * 4); } ) You should be able to see that the startTimes of the boxes towards the bottom (end of animation) are much closer together just as the ease curve flattens out at the end. That pen has a block of code commented out showing that you could cycle the delay property of tweens in a staggerTo() but I find the loop easier to digest in this case tl.staggerTo(".box", 1, {x:500, ease:Linear.easeNone, cycle:{ delay:function(index){ return curve.getRatio(index/numBoxes) * 4 } }}, 0) Hopefully this gets you on the right path.
  48. 4 likes
    And here's an example of a particle fountain using the Physics2DPlugin.
  49. 4 likes
    Offscreen Canvas Canvas is fast, but it's not a silver bullet. You still need to be mindful of how things get rendered. If you're constantly drawing something that does not change much, like its shape or color, you may be able to improve performance by rendering that object to an offscreen canvas (cacheAsBitmap). Here's a good EaselJS demo showing the performance difference caching stuff to an offscreen canvas can make. Checking the cache enabled checkbox will provide a massive performance boost. http://createjs.com/demos/easeljs/cache And here's a simplified demo without any animations showing how to use an offscreen canvas. This is same technique I'm using in that canvas orbs demo to draw the gradient.
  50. 4 likes
    That's going to depend on if want the entire page to be scrollable or just a section, like in this demo how the header won't scroll. I'm using the content component from Angular Material in that demo, which adds some flexbox styling. https://material.angularjs.org/latest/demo/content